Submitted almost 2 years ago

Done With Vite + React

@KoliaK

A solution to the Four card feature section challenge

Solution retrospective

I'm really glad I manage to deploy my first challenge done with React + Vite. Everything works fine locally, but when I deployed the project on github (via terminal, with gh-pages), the icons won't show up. Anyone would help me to understand why is that happening?

(Solved the issue by importing the images inside the .jsx files for each component that uses those images, thanks to Bryan Li @Zy8712)

Code

Please log in to post a comment

Community feedback

Bryan Li•3,530
@Zy8712
Posted almost 2 years ago
Your site looks pretty good. Here is a possible solution I propose to your problem:

Import images into your components using import statements at the top of your file. An example of such would be with your CardContainerLeft.jsx component:

Add to the top of your file:
```
import supervisor_icon from './src/images/icon-supervisor.svg';
```
And then adjust your img tag to:
```
<img src={supervisor_icon} alt="magnifying_glass" />
```
Then you should do something similar with your other components with images in them. I hope you find this feedback useful. If you have any other problems feel free to ask 👍

Additional reading/resources here.
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord