Images not loading properly on github pages

[mhmarina]

Hello, I just created my first React website and I wanted to deploy it using Github pages. When I run the site locally using npm run dev, everything looks right and the images load properly. However, they do not load when deployed. I suspect it's an issue with the file path but I'm not sure. Here is the repository for reference:
https://github.com/mhmarina/marina-website
Any help appreicated, thanks! :)

[ananuness]

Hii Marina! Actually I have some suggestions! The images are being used in Gallery.tsx, right?

1. You can change the _URL_ to ../assets/artAssets/ and see if it works already, but also I would change the 15, 17, 20 and 22 lines because the image extension is in caps (just in case)

2. You can import all images as components!! Just like:

import myImage from '../assets/artAssets/myImage.png';

And put it inside an array just like you did with the strings. I did something similar but using object notation.

I hope it helps! 😊 If not, let me know!!

[mhmarina]

you just saved me!! Importing the assets seemed to do it. Thank you so much :)

[ananuness]

Yaay!! I'm glad that it worked! 🥳