Images not loading in vite + react app on GitHub

HTML-CSS
1

Hello guys! I recently completed a FAQ project using Vite, React, and TailwindCSS. When I deployed the app on GiHub, the images were not loading. I checked the path, and its correct, don’t know why it’s not working. Please look into the below link, and can you guys tell me what’s wrong and how to fix it? It will be really helpful, guys :face_holding_back_tears:

Source Code Link
Project Deployed Link

1 Like
2

Put the assets folder in the src folder and use the import syntax as shown in the Vite React template for the two logos.

Or move it to the public folder and use a root relative path. If you change the base path it must be used for the root relative path.

Import:

import star from "./assets/images/star.svg";

<img className="w-8" src={star} />

Using public folder:

<img className="w-8" src="/faq-accordion/assets/images/star.svg" />

If you use the deployment as “GitHub Actions” you can use the yml file provided in the Vite docs.

2 Likes
3

Thanks a lot! It worked :star_struck: :v:

4

Congratulations on completing your FAQ project!

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.