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 One Solution

Images Not Showing in browser

Images Not Showing in browser

3 Answers

Make sure that you're not wrapping the JSX expression in double quotes.

So the sample provided is

        <div>
          <img src="img/mercury.jpg" alt="Mercury">
        </div>

and we'll convert it to

        <div>
          <img src={props.url} alt={props.name}>
        </div>

If you accidentally just replace the URL with the expression, and don't get rid of the double quotes, that content wont render! This is because the content is already wrapped in quotes in the array, so you'd be doubling up!

So if your code looks like this...

        <div>
          <img src="{props.url}" alt="{props.name}">
        </div>

...just remove the quotes!

David Kayser
David Kayser
12,009 Points

Why aren't quotes required here? They are for className so I'd assumed they would be for src and alt as well.

Theresa Secore
Theresa Secore
7,001 Points

It's actually not 'className' but it's 'src' (for img tag) and to dynamically load images in the 'card' div (instead of hard coding the url).

In the Planet component, you'll need to pass: src={ props.url } and same with: alt={ props.name }.

So the the div looks like:

    <div>
      <img src={props.url} alt={props.name} />
    </div>

These props are passed from the 'container' component. When ReactDOM renders the 'container' component, correct planet images will be placed in the 'card' div.

You may also need to make sure the <img> tag is self closing. I copied the <img> tag from the HTML file

<img src="img/mercury.jpg" alt="Mercury">

and the images would not render:

<img src={props.url} alt={props.name}>

However adding the trailing slash to make the tag self closing renders correctly:

<img src={props.url} alt={props.name} />