How to manage images without import with React


today I deployed my app and i saw my images are not displayed when there is no direct import.
For exemple :
import fruit from “…/…/images/allfruits.jpg”;
<img className={style[“image”]} src={fruit} height={150} alt=“” />

this work, but this
img key={} className={style[‘img’]} src={“http://localhost:5173/src/images/” +} alt=“” />

Not work.

It’s obsious I must change the localhost url but my image are not deploy with the app.
Is there a way to fix this ?

Thanks for your futurs reply !

What is your site name?

I delete it and I use vercel atm. But there the problem is the same.
I have found a temporary solution, I created a small API where I uploaded all the images.
But may be is there a way without this ?

This isn’t a Netlify question. It’s a coding question and should be asked on coding forums going forward.

But to answer your question, you don’t need to import anything. Simply put them in public folder: Static Asset Handling | Vite ( and use <img src="/image.jpg"/>

A bit late but ty for you’re help !

1 Like