mark
/
migrants-nt-web
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: update image paths to use BASE_URL environment variable for proper asset loading

This commit is contained in:
mark 2025-05-28 08:13:48 +08:00
parent 5adb5ddead
commit c908859f10
6 changed files with 25 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/admin/migrant/form-steps/PhotosStep.tsx
View File

@ -144,7 +144,7 @@ const PhotosStep: React.FC<PhotosStepProps> = ({
<Card key={`new-${index}`} className="overflow-hidden"> <Card key={`new-${index}`} className="overflow-hidden">
<div className="relative"> <div className="relative">
<img <img
src={photoPreviews[index] || "/placeholder.svg"} src={photoPreviews[index] || `${import.meta.env.BASE_URL}placeholder.svg`}
alt={`Preview ${index}`} alt={`Preview ${index}`}
className="w-full h-48 object-cover" className="w-full h-48 object-cover"
/> />

32
src/components/home/HeroSection.tsx
View File

@ -44,19 +44,19 @@ export default function Home() {
const backgroundImages = [ const backgroundImages = [
{ {
src: "/slide1.avif", src: `${import.meta.env.BASE_URL}slide1.avif`,
alt: "Italian countryside landscape", alt: "Italian countryside landscape",
}, },
{ {
src: "/slide2.avif", src: `${import.meta.env.BASE_URL}slide2.avif`,
alt: "Vintage Italian architecture", alt: "Vintage Italian architecture",
}, },
{ {
src: "/slide3.avif", src: `${import.meta.env.BASE_URL}slide3.avif`,
alt: "Italian coastal town", alt: "Italian coastal town",
}, },
{ {
src: "/slide4.avif", src: `${import.meta.env.BASE_URL}slide4.avif`,
alt: "Italian countryside with vineyards", alt: "Italian countryside with vineyards",
}, },
] ]
@ -143,11 +143,10 @@ export default function Home() {
{backgroundImages.map((image, index) => ( {backgroundImages.map((image, index) => (
<div <div
key={index} key={index}
className={`absolute inset-0 transition-opacity duration-1000 ${ className={`absolute inset-0 transition-opacity duration-1000 ${index === currentSlide ? "opacity-100" : "opacity-0"
index === currentSlide ? "opacity-100" : "opacity-0"
}`} }`}
> >
<img src={image.src || "/placeholder.svg"} alt={image.alt} className="w-full h-full object-cover" /> <img src={image.src || `${import.meta.env.BASE_URL}placeholder.svg`} alt={image.alt} className="w-full h-full object-cover" />
<div className="absolute inset-0 bg-black/60" /> <div className="absolute inset-0 bg-black/60" />
</div> </div>
))} ))}
@ -353,7 +352,7 @@ export default function Home() {
<div className="p-1"> <div className="p-1">
<div className="overflow-hidden rounded-xl aspect-square"> <div className="overflow-hidden rounded-xl aspect-square">
<img <img
src={image.src || "/placeholder.svg"} src={image.src || `${import.meta.env.BASE_URL}placeholder.svg`}
alt={image.alt} alt={image.alt}
className="object-cover w-full h-full hover:scale-105 transition-transform duration-300" className="object-cover w-full h-full hover:scale-105 transition-transform duration-300"
/> />
@ -560,21 +559,22 @@ export default function Home() {
</div> </div>
</div> </div>
<nav className="flex gap-6"> <nav className="flex gap-6">
<Link to="/terms" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors"> <a href="#" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
Terms of Service Terms of Service
</Link> </a>
<Link to="/privacy" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors"> <a href="#" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
Privacy Policy Privacy Policy
</Link> </a>
<Link to="/accessibility" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors"> <a href="#" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
Accessibility Accessibility
</Link> </a>
<Link to="/admin" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors"> <a href="#" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
Admin Admin
</Link> </a>
</nav> </nav>
</div> </div>
</div> </div>
</div> </div>
</footer> </footer>
</div> </div>

8
src/components/home/MigrantProfileComponent.tsx
View File

@ -71,12 +71,12 @@ export default function MigrantProfile() {
? profilePhoto.file_path.startsWith('http') ? profilePhoto.file_path.startsWith('http')
? profilePhoto.file_path ? profilePhoto.file_path
: `${API_BASE_URL}${profilePhoto.file_path}` : `${API_BASE_URL}${profilePhoto.file_path}`
: '/placeholder.svg?height=600&width=450'} : `${import.meta.env.BASE_URL}placeholder.svg?height=600&width=450`}
alt={`${migrant.full_name || 'Migrant photo'}`} alt={`${migrant.full_name || 'Migrant photo'}`}
className="aspect-[3/4] object-cover w-full" className="aspect-[3/4] object-cover w-full"
onError={(e) => { onError={(e) => {
// Handle image loading errors by setting a fallback // Handle image loading errors by setting a fallback
e.currentTarget.src = '/placeholder.svg?height=600&width=450'; e.currentTarget.src = `${import.meta.env.BASE_URL}placeholder.svg?height=600&width=450`;
}} }}
/> />
</div> </div>
@ -189,12 +189,12 @@ export default function MigrantProfile() {
? photo.file_path.startsWith('http') ? photo.file_path.startsWith('http')
? photo.file_path ? photo.file_path
: `${API_BASE_URL}${photo.file_path}` : `${API_BASE_URL}${photo.file_path}`
: '/placeholder.svg?height=400&width=600'} : `${import.meta.env.BASE_URL}placeholder.svg?height=400&width=600`}
alt={photo.caption || "Migrant photo"} alt={photo.caption || "Migrant photo"}
className="aspect-video object-cover w-full" className="aspect-video object-cover w-full"
onError={(e) => { onError={(e) => {
// Handle image loading errors // Handle image loading errors
e.currentTarget.src = '/placeholder.svg?height=400&width=600'; e.currentTarget.src = `${import.meta.env.BASE_URL}placeholder.svg?height=400&width=600`;
}} }}
/> />
</div> </div>

2
src/components/home/SearchResults.tsx
View File

@ -75,7 +75,7 @@ export default function SearchResults() {
src={ src={
migrant.profilePhoto migrant.profilePhoto
? `${API_BASE_URL}${migrant.profilePhoto.file_path}` ? `${API_BASE_URL}${migrant.profilePhoto.file_path}`
: "/placeholder.svg?height=300&width=300" : `${import.meta.env.BASE_URL}placeholder.svg?height=300&width=300`
} }
alt={migrant.full_name || "Unknown"} alt={migrant.full_name || "Unknown"}
className="w-full h-full object-cover object-center transition-transform hover:scale-105" className="w-full h-full object-cover object-center transition-transform hover:scale-105"

2
src/components/ui/ProfileSettings.tsx
View File

@ -255,7 +255,7 @@ export default function ProfileSettings() {
<div className="h-24 w-24 rounded-full bg-gray-200 overflow-hidden"> <div className="h-24 w-24 rounded-full bg-gray-200 overflow-hidden">
{profile.avatar ? ( {profile.avatar ? (
<img <img
src={profile.avatar || "/placeholder.svg"} src={profile.avatar || `${import.meta.env.BASE_URL}placeholder.svg`}
alt="Profile" alt="Profile"
className="h-full w-full object-cover" className="h-full w-full object-cover"
/> />

2
src/components/ui/animated-image.tsx
View File

@ -32,7 +32,7 @@ export default function AnimatedImage({
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}
> >
<img <img
src={src || "/placeholder.svg"} src={src || `${import.meta.env.BASE_URL}placeholder.svg`}
alt={alt} alt={alt}
width={!fill ? width : undefined} width={!fill ? width : undefined}
height={!fill ? height : undefined} height={!fill ? height : undefined}