2018-09-30 22:01:58 +00:00
---
id: bad87fee1348bd9aedf08812
title: Add Images to Your Website
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/c8EbJf2'
2019-07-31 18:32:23 +00:00
forumTopicId: 16640
2018-09-30 22:01:58 +00:00
---
## Description
< section id = 'description' >
You can add images to your website by using the < code > img< / code > element, and point to a specific image's URL using the < code > src< / code > attribute.
An example of this would be:
< code > & #60img src="https://www.your-image-source.com/your-image.jpg"& #62< / code >
Note that < code > img< / code > elements are self-closing.
All < code > img< / code > elements < strong > must< / strong > have an < code > alt< / code > attribute. The text inside an < code > alt< / code > attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.
2019-03-22 14:02:12 +00:00
< strong > Note:< / strong > If the image is purely decorative, using an empty < code > alt< / code > attribute is a best practice.
2018-09-30 22:01:58 +00:00
Ideally the < code > alt< / code > attribute should not contain special characters unless needed.
Let's add an < code > alt< / code > attribute to our < code > img< / code > example above:
< code > & #60img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up."& #62< / code >
< / section >
## Instructions
< section id = 'instructions' >
Let's try to add an image to our website:
2018-10-18 00:22:44 +00:00
Insert an < code > img< / code > tag, after the < code > main< / code > element.
2018-09-30 22:01:58 +00:00
Now set the < code > src< / code > attribute so that it points to this url:
< code > https://bit.ly/fcc-relaxing-cat< / code >
Finally don't forget to give your image an < code > alt< / code > text.
< / section >
## Tests
< section id = 'tests' >
```yml
2018-10-04 13:37:37 +00:00
tests:
- text: Your page should have an image element.
2019-04-10 13:51:52 +00:00
testString: assert($("img").length);
2018-10-04 13:37:37 +00:00
- text: Your image should have a < code > src</ code > attribute that points to the kitten image.
2019-04-10 13:51:52 +00:00
testString: assert(/^https:\/\/bit\.ly\/fcc-relaxing-cat$/i.test($("img").attr("src")));
2019-11-20 14:45:19 +00:00
- text: Your image element's < code > alt</ code > attribute should not be empty.
2019-04-10 13:51:52 +00:00
testString: assert($("img").attr("alt") && $("img").attr("alt").length && /< img \S* alt = (['"])(?! \1| > )\S+\1\S*\/?>/.test(code.replace(/\s/g,'')));
2018-09-30 22:01:58 +00:00
```
< / section >
## Challenge Seed
< section id = 'challengeSeed' >
< div id = 'html-seed' >
```html
< h2 > CatPhotoApp< / h2 >
< main >
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
< 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 >
```
< / div >
< / section >
## Solution
< section id = 'solution' >
2018-11-08 05:09:13 +00:00
```html
< h2 > CatPhotoApp< / h2 >
< main >
2019-02-06 02:31:31 +00:00
< a href = "#" > < img src = "https://bit.ly/fcc-relaxing-cat" alt = "A cute orange cat lying on its back." > < / a >
2018-11-08 05:09:13 +00:00
< 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 >
2018-09-30 22:01:58 +00:00
```
2019-02-06 02:31:31 +00:00
2018-09-30 22:01:58 +00:00
< / section >