Curriculum - Add Images to Your Website

Tell us what’s happening:
My test results tell me that " Your image should have a src attribute that points to the kitten image." It has a nice big X next to it so I know it’s wrong. I have the kitten image - I can see it.
I looked on the Hint page which didn’t really help - too much jargon and too confusing. Watched the video which was superb! Did what the video suggested but FCCstill says no :frowning:

Where am I going wrong?

Your code so far


<img src="https://www.your-image-source.com/your-image.jpg"alt="Author standing on a beach with two thumbs up.">
<img src="https://bit.ly/fcc-relaxing-cat" alt="Relaxing cat">


<h2>CatPhotoApp</h2>
<main>
  
  
  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/add-images-to-your-website

Is need to be inside of main element that two img tag!

<h2>CatPhotoApp</h2>
<main>
<img src="https://www.your-image-source.com/your-image.jpg"alt="Author standing on a beach with two thumbs up.">
<img src="https://bit.ly/fcc-relaxing-cat" alt="Relaxing cat">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>

Hi bestdesign and thank you for responding. I’m sorry but I’m new and I don’t quite understand. The tests have not said the placement is incorrect.

<img src="https://www.your-image-source.com/your-image.jpg"alt="Author standing on a beach with two thumbs up.">

This should not be in your code.

Hello AreilLeslie,
The code you are quoting is the lesson code. I am not being tested on that. The link to the challenge is above but I have copied it below:


You can add images to your website by using the img element, and point to a specific image’s URL using the src attribute.

An example of this would be:

<img src="https://www.your-image-source.com/your-image.jpg">

Note that img elements are self-closing.

All img elements must have an alt attribute. The text inside an alt attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.

Note: If the image is purely decorative, using an empty alt attribute is a best practice.

Ideally the alt attribute should not contain special characters unless needed.

Let’s add an alt attribute to our img example above:

<img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up.">

Let’s try to add an image to our website:

Insert an img tag, before the h2 element.

Now set the src attribute so that it points to this url:

https://bit.ly/fcc-relaxing-cat

Finally don’t forget to give your image an alt text.


I thought I had given it an ‘alt’ text.

yes, that is the example code, which you have added to the editor, so the tests are seeing it, and it has not the desired src value so you are being marked wrong.

1 Like

Ohhh, I see now - thank you ieahleen :+1:

Perhaps the lesson should have included that nugget… My code was actually right.

I have removed the example code and it has let me progress.
Thank you again.

You can grab an image off the internet by right clicking on the image and select “Copy image address”
then you can paste is between the img src=" paste link here "> tag like this:

<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

Useful to know - thank you Danmax :+1: