For a school project, I made a quick To-Do list using Vite and React. However, the images aren't working. I'm not too familiar with Vercel or Vite in general, so I was looking for any advice in fixing the issue.
Is the call function the issue, or folder paths?
Thank you in advance.
Site Link: https://wads-todo-list-ow2jm6gqw-ushiens-projects.vercel.app Repo Link: https://github.com/FromTheNightJourney/WADSTodoList/tree/main/todoapp
Initially, the images were in the resources folder. I saw some threads here that said moving it to the public folder was the move, so I did that and redeployed. However, still no luck on resolving the issue. I am unsure of what to do next.
You are not importing your images in your components correctly.
Note: You should add more details directly to the question as opposed to directing people to your GitHub repo (that makes people skip helping). In your case, add codes of where you were importing your images.
However, I have had a look at your repo and your image import is wrong. Vite has a specific way of handling static assets, and if you decide to use the public directory option, you should follow the docs as-is.
You are importing an image like this:
<img src='public\static\images\serch.png' alt="Search" className="ml-4 w-6 h-6 cursor-pointer" />
But the docs say you need to reference with the root absolute path i.e /serch.png
So:
put your assets directly in the public folder for ease (you put some in a sub-folder). You can try assessing them using /static/images/serch.png but if using a sub-folder is not an absolute need, why use it?
Reference the images in your source codes correctly using the root absolute path i.e /serch.png (if in the public folder) or /static/images/serch.png (if you keep them in the sub-folder)
That should fix the issue.
You should check the documentation again for full clarity.