img 标签 src 必须为有效路径或 URL，常见错误致 404 或空白；alt 是必要语义字段，需描述性内容或留空；建议显式设置宽高防布局偏移；响应式应使用 srcset + sizes 而非仅 CSS 缩放。
img 标签 src 属性必须是有效路径或 URL
浏览器加载图片失败，八成是因为 src 值写错了。它不是“随便填个名字就行”，而是要能被浏览器实际定位到的资源地址。
常见错误现象：404 Not Found、页面显示空白方块、控制台报 Failed to load resource。
- 本地文件：用相对路径时，以 HTML 文件所在目录为基准，比如 HTML 在
/pages/index.html，图片在/assets/logo.png，就得写src="../assets/logo.png" - 绝对路径慎用：
src="/assets/logo.png"会从域名根目录找，上线后路径易错，开发时又常和本地服务器根目录不一致 - 网络图片：确保 URL 可直连，且协议一致（
http://页面里不能嵌https://图片，会因混合内容被拦截） - 别漏写协议：像
src="example.com/img.jpg"是无效的，必须是src="https://example.com/img.jpg"或带协议的相对 URL（如//example.com/img.jpg）
alt 属性不是可选项，而是必要语义字段
不写 alt 不影响图片显示，但会影响可访问性、SEO 和图片加载失败时的降级体验。
使用场景：屏幕阅读器靠它描述图片；搜索引擎靠它理解图意；图片路径失效时，文字会替代显示。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 有信息量的图（如图表、产品图）：写具体描述，例如
alt="iPhone 15 Pro 钛金属银色正面特写" - 纯装饰图：写空字符串
alt=""，告诉辅助技术“忽略此图” - 千万别写
alt="图片"或alt="logo"这类无意义内容，等于没写 - 不要用 alt 堆关键词做 SEO，会被判定为作弊
宽高属性（width/height）仍建议显式声明
现代浏览器支持响应式图片，但不设 width 和 height 会导致布局偏移（layout shift），尤其在图片异步加载时明显抖动。
性能影响：浏览器提前知道尺寸，就能预留空间，避免重排重绘，提升 CLS（累积布局偏移）指标。
- 直接写内联属性最稳妥：
<img src="a.jpg" width="300" height="200"> - CSS 设置也可以，但需确保单位明确（如
width: 300px），百分比需父容器有固定尺寸才可靠 - 响应式场景下，可用
aspect-ratio替代（如style="aspect-ratio: 3 / 2;"），但 IE 和旧版 Safari 不支持 - 注意：只设一个尺寸（比如只设
width）时，浏览器默认等比缩放高度，但前提是原图比例没被 CSS 强行扭曲
响应式图片要用 srcset + sizes，而不是只靠 CSS
单纯用 CSS 缩放 <img> 不会减少下载体积，手机照样下桌面大图，浪费带宽。
正确做法是让浏览器根据设备像素比和视口宽度，自主选择最合适的源文件。
-
srcset提供多个分辨率版本：srcset="logo-1x.jpg 1x, logo-2x.jpg 2x"或srcset="logo-400w.jpg 400w, logo-800w.jpg 800w" -
sizes告诉浏览器“在什么条件下这张图占多宽”：sizes="(max-width: 768px) 100vw, 50vw" - 基础
src仍是必需的，作为兜底项，浏览器不支持 srcset 时才用它 - 别把所有图片都塞进
srcset：小图标、SVG、CSS 背景图通常不需要，优先考虑格式和压缩
src 的路径基准和 alt 的实际描述价值——它们不报错，但一上线就暴露问题。 
