React course AirBnb project images not appearing

[desert rover]

I took screenshots of my issue. I am sure the issue can be found from there.
The error I get from console log seems to be wrong, cuz nothing should be wrong with exporting the Card.js
Both the star and katies picture is not appearing. I think the path for both of the images are correct.
Only way I can get for example katies picture to appear if i do this:

import KatieImg from "../images/katie.png"

<img src={KatieImg} className="card-img"/>

Same for the star icon, but it should be done using props. Can anyone spot the mistake?

[main river]

if I remember correctly when I used my local vite react app with VScode I had to move the images folder to the /public folder to have it working. Otherwise what I ended up doing was import the image similar to a component and use that as the src

[hard portal]

How to add images to react https://create-react-app.dev/docs/adding-images-fonts-and-files/
Also check this thread - #983960467267530753 message

Better to import those images for this project.(read the first link) In future when you learn to use Vite, it will get easier than this.

[desert rover]

@main river @hard portal thank you both very much! will try this out tomorrow, been doing react stuff the entire day ❤️

[hard portal]

Ya give your brain the needed rest. Solving problems with a fresh mind really does help.

[desert rover]

Hey! I read other posts and used the method of putting the images folder into public, and then it just worked. I tried importing too but it got kind of messy for my head.

[desert rover]

Is there a reason why public worked instead of src? Also, I used "npm start" to see my project, I read that putting it into public was only for "npm build" or something?

[hard portal]

React project is bundled into a single file/folder based on the code through bundlers. Create React app (CRA) is configured to grab static files(likes images, downloaded font etc) that way.

[desert rover]

Gotcha, thanks!

[teal escarp]

if someone is still struggling. What fixed this for me using hints from react console and the answers here without any env variables

my path was simply /images or assets in my case.