Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by robin blaauw
robin blaauw
2,062 Points

Images are not showing

Im having some problems with the images here. I followed along with the solution but somehow the images are not showing. I used a local setup that i created with npx create-react-app. My setup at the moment is like this:

public index.js index.css img -> the images are in the folder

Somehow It can't find the images. Do you need a special way to get the index.js to locate the images? When I inspect the project in my browser it says it can not find the images aswell. Any help would be appreciated!

robin blaauw
robin blaauw
2,062 Points

I don't know if this is the proper way to fix it but I added another javascript file called planets.js in which I imported the images and then added them to an array of objects. It looks like this:

import mercury from "./img/mercury.jpg"; import venus from "./img/venus.jpg"; import earth from "./img/earth.jpg"; import mars from "./img/mars.jpg"; import jupiter from "./img/jupiter.jpg"; import saturn from "./img/saturn.jpg"; import uranus from "./img/uranus.jpg"; import neptune from "./img/neptune.jpg";

const planetimages = [ {src: mercury}, {src: venus}, {src: earth}, {src: mars}, {src: jupiter}, {src: saturn}, {src: uranus}, {src: neptune} ];

export default planetimages;

Is this the proper way of doing this or is there another better and faster way to get this done?