2018-10-10 22:03:03 +00:00
---
id: bad87fee1348bd9aedf08812
2020-12-16 07:37:30 +00:00
title: 给网站添加图片
2018-10-10 22:03:03 +00:00
challengeType: 0
2019-12-26 12:05:59 +00:00
videoUrl: 'https://scrimba.com/p/pVMPUv/c8EbJf2'
forumTopicId: 16640
2021-01-13 02:31:00 +00:00
dashedName: add-images-to-your-website
2018-10-10 22:03:03 +00:00
---
2020-12-16 07:37:30 +00:00
# --description--
2021-01-08 19:20:48 +00:00
你可以使用 `img` 元素来为你的网站添加图片,其中 `src` 属性指向图片的地址。
2020-12-16 07:37:30 +00:00
2019-12-26 12:05:59 +00:00
例如:
2020-12-16 07:37:30 +00:00
`<img src="https://www.freecatphotoapp.com/your-image.jpg">`
2021-01-08 19:20:48 +00:00
注意:`img` 元素是没有结束标签的。
2020-12-16 07:37:30 +00:00
2021-01-21 02:58:05 +00:00
所有的 `img` 元素**必须**有 `alt` 属性。 `alt` 的属性值有两个作用,第一个作用是让屏幕阅读器可以知晓图片的内容,这会对网页的可访问性有很大提升;另一个作用是当图片无法加载时,页面需要显示的替代文本。
2020-12-16 07:37:30 +00:00
2021-01-21 02:58:05 +00:00
**注意:**如果图片是纯装饰性的,把 `alt` 的属性值设置为空是最佳实践。
2020-12-16 07:37:30 +00:00
2021-01-08 19:20:48 +00:00
理想情况下,`alt` 属性不应该包含特殊字符,除非有特殊需要。
2020-12-16 07:37:30 +00:00
2021-01-08 19:20:48 +00:00
让我们给上面例子的 `img` 添加 `alt` 属性。
2020-12-16 07:37:30 +00:00
2021-01-21 02:58:05 +00:00
`<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">`
2020-12-16 07:37:30 +00:00
# --instructions--
2019-12-26 12:05:59 +00:00
让我们给网站添加图片:
2018-10-10 22:03:03 +00:00
2021-01-08 19:20:48 +00:00
在 `main` 元素里,给 `p` 元素前面插入一个 `img` 元素。
2020-12-16 07:37:30 +00:00
2021-01-21 02:58:05 +00:00
然后将 `src` 的属性值设置为这个 url:
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
`https://bit.ly/fcc-relaxing-cat`
2018-10-10 22:03:03 +00:00
2021-01-21 02:58:05 +00:00
最后,不要忘记给 `img` 加上 `alt` 属性。
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
# --hints--
2018-10-10 22:03:03 +00:00
2021-01-08 19:20:48 +00:00
你的网页上应该有一张图片。
2020-12-16 07:37:30 +00:00
```js
assert($('img').length);
2018-10-10 22:03:03 +00:00
```
2021-01-21 02:58:05 +00:00
你的图片应该有一个 `src` 属性,其值为猫咪图片的 url。
2020-12-16 07:37:30 +00:00
```js
assert(/^https:\/\/bit\.ly\/fcc-relaxing-cat$/i.test($('img').attr('src')));
```
2018-10-10 22:03:03 +00:00
2021-01-21 02:58:05 +00:00
你的图片元素的 `alt` 属性值不应为空。
2018-10-10 22:03:03 +00:00
2020-12-16 07:37:30 +00:00
```js
assert(
$('img').attr('alt') & &
$('img').attr('alt').length & &
2021-01-21 02:58:05 +00:00
/< img \S* alt = (['"])(?! \1| > )\S+\1\S*\/?>/.test(
__helpers.removeWhiteSpace(code)
)
2020-12-16 07:37:30 +00:00
);
```
2018-10-10 22:03:03 +00:00
2021-01-13 02:31:00 +00:00
# --seed--
## --seed-contents--
```html
< 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 >
```
2020-12-16 07:37:30 +00:00
# --solutions--
2018-10-10 22:03:03 +00:00
2021-01-13 02:31:00 +00:00
```html
< h2 > CatPhotoApp< / h2 >
< main >
< a href = "#" > < img src = "https://bit.ly/fcc-relaxing-cat" alt = "A cute orange cat lying on its back." > < / a >
< 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 >
```