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">
<div className="relative">
<img
src={photoPreviews[index] || "/placeholder.svg"}
src={photoPreviews[index] || `${import.meta.env.BASE_URL}placeholder.svg`}
alt={`Preview ${index}`}
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 = [
{
src: "/slide1.avif",
src: `${import.meta.env.BASE_URL}slide1.avif`,
alt: "Italian countryside landscape",
},
{
src: "/slide2.avif",
src: `${import.meta.env.BASE_URL}slide2.avif`,
alt: "Vintage Italian architecture",
},
{
src: "/slide3.avif",
src: `${import.meta.env.BASE_URL}slide3.avif`,
alt: "Italian coastal town",
},
{
src: "/slide4.avif",
src: `${import.meta.env.BASE_URL}slide4.avif`,
alt: "Italian countryside with vineyards",
},
]
@ -143,11 +143,10 @@ export default function Home() {
{backgroundImages.map((image, index) => (
<div
key={index}
className={`absolute inset-0 transition-opacity duration-1000 ${
index === currentSlide ? "opacity-100" : "opacity-0"
className={`absolute inset-0 transition-opacity duration-1000 ${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>
))}
@ -353,7 +352,7 @@ export default function Home() {
<div className="p-1">
<div className="overflow-hidden rounded-xl aspect-square">
<img
src={image.src || "/placeholder.svg"}
src={image.src || `${import.meta.env.BASE_URL}placeholder.svg`}
alt={image.alt}
className="object-cover w-full h-full hover:scale-105 transition-transform duration-300"
/>
@ -560,21 +559,22 @@ export default function Home() {
</div>
</div>
<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
</Link>
<Link to="/privacy" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
</a>
<a href="#" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
Privacy Policy
</Link>
<Link to="/accessibility" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
</a>
<a href="#" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
Accessibility
</Link>
<Link to="/admin" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
</a>
<a href="#" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
Admin
</Link>
</a>
</nav>
</div>
</div>
</div>
</footer>
</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
: `${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'}`}
className="aspect-[3/4] object-cover w-full"
onError={(e) => {
// 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>
@ -189,12 +189,12 @@ export default function MigrantProfile() {
? photo.file_path.startsWith('http')
? 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"}
className="aspect-video object-cover w-full"
onError={(e) => {
// 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>

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

@ -75,7 +75,7 @@ export default function SearchResults() {
src={
migrant.profilePhoto
? `${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"}
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">
{profile.avatar ? (
<img
src={profile.avatar || "/placeholder.svg"}
src={profile.avatar || `${import.meta.env.BASE_URL}placeholder.svg`}
alt="Profile"
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 }}
>
<img
src={src || "/placeholder.svg"}
src={src || `${import.meta.env.BASE_URL}placeholder.svg`}
alt={alt}
width={!fill ? width : undefined}
height={!fill ? height : undefined}