HTML5中正确显示图片需用标签并确保src路径准确、添加alt属性；支持本地/网络路径、picture响应式、Base64内联及onerror备用方案。
如果您希望在HTML5网页中正确显示图片，必须确保图片路径准确且标签语法符合标准。以下是实现HTML5图片导入的具体步骤与常用图像插入技巧：
一、使用img标签插入本地图片
HTML5通过元素嵌入图像，该标签为自闭合标签，需指定src属性指向图片文件路径。路径可以是相对路径或绝对路径，浏览器根据该路径定位并加载图像资源。
1、将图片文件（如logo.png）放置在与HTML文件同目录下，或放入指定子文件夹（如images/）。
2、在HTML文档的body内编写标签，设置src属性为图片路径，例如：
。
立即学习“前端免费学习笔记（深入）”；
3、为提升可访问性与SEO效果，必须添加alt属性描述图像内容，例如：。
4、可选添加width和height属性控制显示尺寸，例如：。
二、引用网络图片地址
当图片托管在外部服务器或CDN时，可通过完整URL作为src值直接引入。该方式无需本地存储图片，但依赖远程服务器可用性及跨域策略限制。
1、获取目标图片的公开可访问URL，例如：https://example.com/images/photo.jpg。
2、在标签中填入该URL作为src值：
。
3、若远程服务器启用了CORS策略且未授权当前域名访问，浏览器可能拒绝加载图像，此时需确认响应头包含Access-Control-Allow-Origin: *或对应域名。
三、使用picture元素实现响应式图像
1、包裹多个
2、在标签作为默认回退方案，其src和alt属性仍为必需项。
3、示例结构如下：
4、所有之前，且不能省略结尾的
标签
四、Base64编码内联图片
将小尺寸图片（如图标、装饰性元素）转换为Base64字符串后直接嵌入HTML，可避免额外HTTP请求，适用于静态且体积较小的图像。
1、使用在线工具或命令行将图片（建议小于4KB）转换为Base64字符串，输出形如data:image/png;base64,iVBORw...。
2、将该字符串作为src值填入标签：
。
3、注意Base64编码会使HTML体积显著增大，不适用于大图或频繁更新的图像资源。
五、处理图片加载失败的备用方案
当src指定的图片无法加载时，浏览器默认仅显示alt文本或空白区域。可通过onerror事件动态替换为备用图像或提示信息。
1、为标签添加onerror属性，调用JavaScript函数或执行内联语句。
2、常见写法为：
。
3、若fallback.png也不存在，该onerror事件不会再次触发，因此备用图路径必须确保有效。
