HTML 中插入图片

在 HTML 中插入图片

• 其实主要是讲一个标签：<img>
• 就是英文 image​ 的缩写，直接翻译就是”图片”的意思
• <img> 是单标签：<img/>

src 属性 —— 图片路径

• src 用来指定图片的路径（可以是网络地址，也可以是本地路径）

<img src="http://b.hiphotos.xxxxx.com/image/pic/item/a71ea8d3fd1f41341e4e1843261f95cad1c85e95.jpg"/>Code language: HTML, XML (xml)

• 这样就能在这幅图片在页面里显示出来了

alt 属性 —— 图片替代文字

• 有时候图片可能加载不出来（比如被删了、链接失效了），怎么办？
• 可以用 alt 属性来说明一下这幅图片，当图片不存在的时候，会用文字来显示

<img src="a71ea8d3fd1f41341e4e1843261f95cad1c85e95ddasdfds.jpg" alt="这是一幅风景图片"/>Code language: HTML, XML (xml)

• 图片加载失败 → 显示文字”这是一幅风景图片”

alt 还有另一个重要作用：给视障用户用的屏幕阅读器会读 alt 内容，告诉他们这张图是什么

width 和 height 属性 —— 图片宽高

• 控制图片显示的尺寸

<!-- 只设宽度，高度会等比例缩放 -->
<img src="http://b.hiphotos.XXXXXXX.com/image/pic/item/a71ea8d3fd1f41341e4e1843261f95cad1c85e95.jpg" width="100"/>

<!-- 只设高度，宽度会等比例缩放 -->
<img src="008/008.jpg" alt="这是一幅本地图片" height="100"/>Code language: HTML, XML (xml)

完整示例汇总

<!-- 网络图片，设置宽度 -->
<img src="http://b.hiphotos.XXXXXX.com/image/pic/item/a71ea8d3fd1f41341e4e1843261f95cad1c85e95.jpg" width="100"/>
<br/>

<!-- 图片不存在时显示alt文字 -->
<img src="a71ea8d3fd1f41341e4e1843261f95cad1c85e95ddasdfds.jpg" alt="这是一幅风景图片"/>
<br/>

<!-- 本地图片，设置高度 -->
<img src="008/008.jpg" alt="这是一幅本地图片" height="100"/>Code language: HTML, XML (xml)

---

<img> 标签常用属性总结

属性	作用	示例
src	图片路径（必填）	src="1.jpg" 或 src="http://..."
alt	图片加载失败时显示的文字	alt="这是一幅风景图片"
width	图片宽度	width="100"（单位默认px）
height	图片高度	height="100"

一般建议只设 width 或 height 其中一个，另一个让浏览器自动等比例缩放，避免图片变形