必须写src和alt属性；src指定图片地址，本地用相对路径（如"images/photo.jpg"），网络用完整url（如"https://example.com/logo.png"）；alt需语义化描述，装饰图写alt=""，不可省略。
用 <img> 标签引入图片，必须写 src 和 alt 两个属性。src 指定图片在哪，alt 告诉用户“这张图是什么”，缺一不可。
图片路径怎么填（src 属性）
src 的值是图片的地址，分两种情况：
-
本地图片：用相对路径最稳妥。比如 HTML 文件和图片都在同一文件夹，就写
src="photo.jpg"；如果图片在images子文件夹里，就写src="images/photo.jpg"。 -
网络图片：用完整 URL，必须以
http://或https://开头，例如src="https://example.com/logo.png"。注意确保该链接可公开访问，否则可能因跨域或失效而显示空白。
替代文本怎么写（alt 属性）
alt 不是可选项，HTML5 强制要求存在。写法有明确规则：
- 信息性图片（如产品图、示意图、按钮图标）要写**简洁准确的描述**，比如
alt="红色运动鞋正面特写"，而不是“一张鞋的图片”。 - 纯装饰性图片（比如分隔线、背景花纹）不能省略 alt，得写成
alt=""—— 空字符串表示“无语义”，屏幕阅读器会跳过它。 - 图片是超链接时，alt 应说明**点击目的**，例如
@#@#@#@#@#@#@#@#@#@0，而不是描述邮筒长什么样。 - 避免重复词，如“图片：”“图标：”，屏幕阅读器已自动播报这是图像。
尺寸和基础样式控制
浏览器默认按原图像素显示，容易撑乱布局。常用调整方式：
- 只设
width或height中的一个（单位为 px 或 %），另一个会自动等比缩放，防止变形。例如：<img src="mail.png" alt="联系客服">。 - 响应式场景下，推荐用 CSS：
style="width: 100%; height: auto;"，让图片随容器宽度自适应。 - 加边框、圆角等效果，用
style属性更灵活，比如：style="border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"。
加载失败怎么办
外部图片尤其容易因链接失效或网络问题无法显示。可加 onerror 回退处理：
<img src="pic.jpg" alt="风景照" style="max-width:90%">
这样一旦原图加载失败，自动切换到本地备用图，并更新提示文字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
