html的图片设置

HTML图片基础设置

属性/方法	作用	示例代码
<img>	用于嵌入图片，必须包含src和alt属性	<img src="image.jpg" alt="描述文字">
src属性	指定图片路径（相对路径/绝对路径/URL）	<img src="/images/pic.jpg" alt="风景图">
alt属性	提供图片替代文本（SEO优化和无障碍访问必备）	<img src="logo.png" alt="公司Logo">
width/height属性	定义图片宽度/高度（建议使用CSS控制，避免失真）	<img src="banner.jpg" alt="横幅" width="800" height="400">

---

图片路径与链接

类型	说明	示例
相对路径	基于HTML文件位置（推荐，便于移植）	<img src="./images/photo.jpg" alt="照片">
绝对路径	从域名根目录开始（不推荐，维护困难）	<img src="/assets/img/avatar.png" alt="头像">
外部URL	直接引用网络图片（注意跨域限制）	<img src="https://example.com/image.jpg" alt="网络图片">
数据URI	将小图片编码为Base64（减少HTTP请求）	<img src="data:image/png;base64,iVBOR..." alt="图标">

---

响应式图片设置

方法	适用场景	代码示例
srcset+sizes	适配不同屏幕尺寸/设备像素比（现代浏览器支持）	```html

``` |
| CSS `max-width` | 限制图片最大宽度（防止布局溢出） | `` |
| `picture`标签 | 结合多个` `实现艺术性/多格式适配 | ```html ``` |

---

图片优化与性能

技术	作用	实现方式
懒加载（Lazy Loading）	延迟加载视口外图片（提升首屏速度）	<img src="image.jpg" alt="内容" loading="lazy">
WebP格式	无损压缩（减小文件体积）	<source srcset="image.webp" type="image/webp">（需配合picture
alt属性优化	提升SEO排名，帮助屏幕阅读器识别内容	<img src="chart.png" alt="2023年销售数据图表">

---

常见问题与解答

问题1：如何让图片自动适应容器大小且保持比例？

解答：
使用CSS设置max-width: 100%; height: auto;，

<img src="photo.jpg" alt="自适应图片" style="max-width:100%; height:auto;">

或通过CSS类控制：

.responsive-img {
  max-width: 100%;
  height: auto;
}

问题2：如何处理图片加载失败的情况？

解答：

1. 使用onerror事件替换备用图片： %ignore_pre_3%
2. 在<picture>标签中添加<img>作为兜底方案：

   <picture>
     <source srcset="primary.jpg" type="image/jpeg">
     <img src="fallback.png" alt="备用图">