How to manage images without import with React

Support
1

Hey,

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={s.name} className={style[‘img’]} src={“http://localhost:5173/src/images/” + s.link} 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 !

2

What is your site name?

3

I delete it and I use vercel atm. But there the problem is the same.
https://mini-encyclopedie-op.vercel.app/lieux
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 ?

4

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 (vitejs.dev) and use <img src="/image.jpg"/>

5

A bit late but ty for you’re help !

1 Like