img标签需用相对或绝对路径（如src="images/icon.jpg"），禁用本地路径；必填语义化alt属性（如alt="微信支付二维码"）；建议声明width/height或CSS aspect-ratio防布局抖动。

img 标签怎么写才不会 404

图片加载失败，八成是路径没写对。浏览器找图片时完全不看你的文件夹结构直觉，只认它眼里“当前 HTML 文件所在位置”这个起点。

• src 值必须是相对路径或绝对路径，不能是本地文件系统路径（比如 C:\images\logo.png）
• 如果 HTML 在 /project/index.html，图片在 /project/images/icon.jpg，就写 src="images/icon.jpg"
• 如果图片在上一级目录的 /assets/logo.svg，就得写 src="../assets/logo.svg"（注意两个点）
• 用开发者工具检查 Network 面板里图片请求的 URL，比猜路径快十倍

alt 属性不是可选项，是必填项

不加 alt 不影响显示，但会影响可访问性、SEO，还可能被某些严格校验工具报错。更重要的是：当图片加载失败时，alt 文字就是用户唯一能读到的内容。

• 别写空字符串 alt=""（除非图纯装饰且无信息量）
• 别写“图片”“图标”这种废话，写实际内容，比如 alt="微信支付二维码"
• 屏幕阅读器会把 alt 朗读出来，所以要简洁准确，一般不超过 125 字符

width 和 height 写不写，影响页面重排

不设宽高，浏览器渲染时得先下载图片、解析尺寸，再重新布局，容易造成文字跳动（layout shift），影响用户体验和 Core Web Vitals。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 推荐写内联 width 和 height（比如 width="200" height="150"），即使后面用 CSS 覆盖也行
• 现代写法更倾向用 CSS 控制尺寸，但记得同时加 aspect-ratio 防止抖动，比如 style="aspect-ratio: 4/3; width: 100%;"
• 响应式场景下，优先用 max-width: 100%; height: auto;，避免拉伸变形

base64 图片该不该直接塞进 src

小图标（

立即学习“前端免费学习笔记（深入）”；

• 适合：加载极快的小 logo、loading 动画、无交互的装饰性 icon
• 不适合：照片、Banner 图、任何 >2KB 的资源
• 写法是 src="data:image/png;base64,iVBORw0KGgo..."，但建议交给构建工具（如 Webpack/Vite）自动处理，别手写
• HTTP/2 下，多张小图合并为雪碧图 + CSS 定位，通常比 base64 更优

图片路径、alt 文本、宽高声明这三处，改起来一两秒，漏掉却最容易让页面在不同环境里表现不一致。特别是团队协作时，别人改了文件夹结构，你那条 src="img/logo.png" 可能下周就变 404。