fix: update placeholder and slide image paths to use assets directory

This commit is contained in:
mark 2025-05-28 08:48:41 +08:00
parent c908859f10
commit 4d7a9492bc
14 changed files with 17 additions and 31 deletions

View File

Before

Width:  |  Height:  |  Size: 1.8 MiB

After

Width:  |  Height:  |  Size: 1.8 MiB

View File

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

View File

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

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] || `${import.meta.env.BASE_URL}placeholder.svg`} src={photoPreviews[index] || `${import.meta.env.BASE_URL}assets/placeholder.svg`}
alt={`Preview ${index}`} alt={`Preview ${index}`}
className="w-full h-48 object-cover" className="w-full h-48 object-cover"
/> />

View File

@ -41,25 +41,13 @@ export default function Home() {
} }
fetchData() fetchData()
}, []) }, [])
const backgroundImages = [ const backgroundImages = [
{ { src: `${import.meta.env.BASE_URL}assets/slide1.avif`, alt: "Italian countryside landscape" },
src: `${import.meta.env.BASE_URL}slide1.avif`, { src: `${import.meta.env.BASE_URL}assets/slide2.avif`, alt: "Vintage Italian architecture" },
alt: "Italian countryside landscape", { src: `${import.meta.env.BASE_URL}assets/slide3.avif`, alt: "Italian coastal town" },
}, { src: `${import.meta.env.BASE_URL}assets/slide4.avif`, alt: "Italian countryside with vineyards" },
{ ];
src: `${import.meta.env.BASE_URL}slide2.avif`,
alt: "Vintage Italian architecture",
},
{
src: `${import.meta.env.BASE_URL}slide3.avif`,
alt: "Italian coastal town",
},
{
src: `${import.meta.env.BASE_URL}slide4.avif`,
alt: "Italian countryside with vineyards",
},
]
const galleryImages = [ const galleryImages = [
{ {
@ -146,7 +134,7 @@ export default function Home() {
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 || `${import.meta.env.BASE_URL}placeholder.svg`} alt={image.alt} className="w-full h-full object-cover" /> <img src={image.src || `${import.meta.env.BASE_URL}assets/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>
))} ))}
@ -352,7 +340,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 || `${import.meta.env.BASE_URL}placeholder.svg`} src={image.src || `${import.meta.env.BASE_URL}assets/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"
/> />

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}`
: `${import.meta.env.BASE_URL}placeholder.svg?height=600&width=450`} : `${import.meta.env.BASE_URL}assets/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 = `${import.meta.env.BASE_URL}placeholder.svg?height=600&width=450`; e.currentTarget.src = `${import.meta.env.BASE_URL}assets/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}`
: `${import.meta.env.BASE_URL}placeholder.svg?height=400&width=600`} : `${import.meta.env.BASE_URL}assets/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 = `${import.meta.env.BASE_URL}placeholder.svg?height=400&width=600`; e.currentTarget.src = `${import.meta.env.BASE_URL}assets/placeholder.svg?height=400&width=600`;
}} }}
/> />
</div> </div>

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}`
: `${import.meta.env.BASE_URL}placeholder.svg?height=300&width=300` : `${import.meta.env.BASE_URL}assets/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"

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 || `${import.meta.env.BASE_URL}placeholder.svg`} src={profile.avatar || `${import.meta.env.BASE_URL}assets/placeholder.svg`}
alt="Profile" alt="Profile"
className="h-full w-full object-cover" className="h-full w-full object-cover"
/> />

View File

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

View File

@ -3,8 +3,8 @@ import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react"; import react from "@vitejs/plugin-react";
import { defineConfig } from "vite"; import { defineConfig } from "vite";
// https://vite.dev/config/
export default defineConfig({ export default defineConfig({
base: '/',
plugins: [react(), tailwindcss()], plugins: [react(), tailwindcss()],
resolve: { resolve: {
alias: { alias: {
@ -16,8 +16,6 @@ export default defineConfig({
"/api": { "/api": {
target: "http://localhost:8000", target: "http://localhost:8000",
changeOrigin: true, changeOrigin: true,
// Don't rewrite the path since Laravel expects /api prefix
// rewrite: (path) => path.replace(/^\/api/, ""),
}, },
}, },
}, },