--- id: bad87fee1348bd9aedf08812 title: Add Images to Your Website challengeType: 0 videoUrl: 'https://scrimba.com/p/pVMPUv/c8EbJf2' forumTopicId: 16640 localeTitle: 给网站添加图片 --- ## Description
img元素来为你的网站添加图片,其中src属性指向一个图片的地址。 例如: <img src="https://www.your-image-source.com/your-image.jpg"> 注意:img元素是没有结束标记的。 所有的img元素必须有alt属性,alt属性的文本是当图片无法加载时显示的替代文本,这对于通过屏幕阅读器来浏览网页的用户非常重要。 注意:如果图片是纯装饰性的,用一个空的alt是最佳实践。 理想情况下,alt属性不应该包含特殊字符,除非必要。 让我们给上面例子的img添加alt属性。 <img src="https://www.your-image-source.com/your-image.jpg" alt="作者站在沙滩上竖起两个大拇指">
## Instructions
让我们给网站添加图片: 在main元素里面,给p前面插入一个img元素 现在设置src属性指向这个地址: https://bit.ly/fcc-relaxing-cat 最后不要忘记给图片添加一个alt文本。
## Tests
```yml tests: - text: 网页应该有一张图片。 testString: assert($("img").length); - text: img 应该有一个src属性,指向猫咪图片。 testString: assert(/^https:\/\/bit\.ly\/fcc-relaxing-cat$/i.test($("img").attr("src"))); - text: img 元素的alt属性值不应为空。 testString: assert($("img").attr("alt") && $("img").attr("alt").length && /)\S+\1\S*\/?>/.test(code.replace(/\s/g,''))); ```
## Challenge Seed
```html

CatPhotoApp

在大家心目中,猫是慵懒和可爱的化身,它可以睡饱了再起来吃饭,可以逗趣小耗子,可以卖得了萌,使得了坏,这样百变的小怪兽就集结在一只宠物上,怎能不惹人怜爱。

养猫有的时候,就是介于爱与恨之间,当你钦羡别人萌宠这么可爱的时候,你一定没有想过,猫咪会到处掉毛,甚至会囤老鼠,啃鞋子,用爪子爬门,你不理它,它就挠你,你要对它发脾气,它会比你更来劲。所以,没有一定的准备,切勿随便去侍养动物。它们一旦认定你了,你就是它们的主人,如果你抛弃它们,它们必定心中重创。

```
## Solution