hi, I have a react project that works very well locally, but when I deploy on netlify and another website some images don’t works, this is my github repository link - GitHub - MtchedlishviliLevani/audiophile-ecommerce-page; this is live - https://curious-pothos-d763ec.netlify.app/;
Which image(s) exactly are you having issues? Could you please clarify?
@MtchedlishviliLevani Run your build locally and you’ll see that Vite reports images it cannot resolve.
If you check your build log on Netlify you will see the same thing.
An example of one of the images reported is:
../../src/assets/images/home/mobile/image-header.jpg referenced in /audiophile-ecommerce-page/src/index.css didn't resolve at build time, it will remain unchanged to be resolved at runtime
Notice it says “it will remain unchanged to be resolved at runtime”, you can see that on the site:
However it’s not going to properly resolve at runtime as there’s no files in that location on the site, there is no ../../ higher than /
Looking to see precisely how your paths are broken:
In the src/components/homePage/NewestItem.tsx file that it references you can see:
../../src/assets/images/home/mobile/image-header.jpg
Following that path to see what’s there we first go “up” two folders, which leaves us in src, and that folder doesn’t itself contain a src folder:
So the asset path should actually be:
../../assets/images/home/mobile/image-header.jpg
You can fix all the others in the same way.
Almost all the pictures on the card page
thanks for replaying but this way don’t works. the only way which works is that my images folder move to public folder instead of src/asset it worked. the reason why works in public folder and not in src i don t know it.
That’s not quite true, having the path be correct is a requirement.
You cannot have an incorrect path and expect it to work.
But it’s possible that you also cannot specify the images in the inline fashion into the class you did without them being done via the public folder.
I don’t work with Vite myself so I’m not sure exactly what it does/doesn’t support.
This also isn’t entirely true.
If you look at the image of these headphones you’ll see they’re done the original way, but not “inline” into the class, they’re imported first and then linked to the src.
You’ll note they also have the correct path with ../../assets (not ../../src/assets).
Why the public folder works with Vite is explained in their Static Asset Handling documentation.
when i import images always works, but i can’t always import images when i have many images and when i want to map images paths, only then don’t works when i mapping