Why every singe image in my web-site isnt seen

Help
1

Images Not Displayed on My Vercel-Deployed Website

Hi, I’m encountering an issue where the images on my website are not visible after deploying the site on Vercel.

Current Behavior:

  • Images fail to load and are either missing or display broken image icons.
  • The issue only happens after deploying the site on Vercel; it works fine locally.
  • interestingly site deployed but no image is displayed

Expected Behavior:

  • All images should display correctly as they do in the local environment.

Steps to Reproduce:

  1. Clone the project and run it locally—images display correctly.
  2. Deploy the project to Vercel—images are not displayed.

Project Information:

  • Framework: [React + Vite.]
  • Image Source: [/public folder]
  • Deployment Platform: Vercel

link: test-ultr.vercel.app

2

Hi, Sherzod! Welome to the Vercel Community :wave:

I took a look at your website, and noticed that the URL for your images, for example: https://test-ultr.vercel.app/logo.png doesn’t render.

This suggests an issue with asset handling during the build and deployment process.

Since you’re using Vite, you might need to adjust how you’re referencing assets from the public folder. Try using the import statement or the new URL() constructor for your images. For example, instead of <img src="/logo.png" alt="Logo" />, use import logoUrl from '/logo.png' and then <img src={logoUrl || "/placeholder.svg"} alt="Logo" />.

It’s also worth checking your Vercel project settings to ensure they’re correctly configured for a Vite + React project. Verify that the build command is set to npm run build or vite build, and the output directory is set to dist. You might also need to adjust your vite.config.js file, particularly the base option, to ensure assets are processed correctly.

To troubleshoot further, you can use the Vercel CLI to test your build locally. This will help you identify any discrepancies between your local environment and Vercel’s build process. If you’re still facing issues, consider sharing more details about your project structure and how you’re importing and using images in your components.

Let us know how you get on!