图片不显示主因是src路径错误：必须以HTML文件所在目录为起点写相对路径，禁用Windows反斜杠和编辑器伪路径；绝对路径“/”仅部署后生效，本地双击会失效。

图片不显示，八成是 src 路径写错了——它永远以 HTML 文件所在位置为起点计算，不是编辑器打开的文件夹，也不是你心里想的“应该在哪”。

路径怎么写：相对路径最常用也最可靠

浏览器找图时，只认 HTML 文件当前在哪个文件夹里。比如你的 index.html 在 /project/ 目录下，那所有 src 都得从这个位置出发算起：

• 图片和 HTML 同目录：src="banner.jpg"
• 图片在子目录 images 里：src="images/logo.png"
• 图片在上一级目录的 assets 文件夹：src="../assets/photo.jpg"
• 跨两级再进子目录：src="../../static/icons/icon.svg"

别用 Windows 资源管理器复制出来的带反斜杠的路径（如 C:\my\site\img.jpg），浏览器不认；也别直接粘贴编辑器左侧文件树里点出来的“完整路径”，那通常是绝对路径或 IDE 自定义路径，不是浏览器能解析的。

绝对路径 / 开头的写法只适用于网站部署后

src="/images/cover.jpg" 这种以 / 开头的路径，意思是“从网站根目录开始找”。它在本地双击 HTML 文件（file:// 协议）时大概率失效，因为此时没有“网站根目录”的概念；只有部署到服务器（如 http://example.com/）后才真正生效。

AISEO

AISEO是一款用于 SEO 文章生成、内容改写和 AI 文本人性化处理的写作工具。

下载

• 本地测试阶段慎用 /xxx，容易白屏且难排查
• 上线前统一检查：如果项目部署在子路径（如 https://example.com/blog/），/images/ 会去找 https://example.com/images/，而不是 https://example.com/blog/images/，导致 404
• 真要用，确保开发服务器（如 Vite、Webpack Dev Server）配置了正确的 base 或 public 目录

网络图片和 Base64 的适用场景很窄

除非明确需要，否则别轻易用这两种方式：

• 网络图片（src="https://cdn.example.com/pic.jpg"）：依赖外部服务稳定性，加载慢可能拖累首屏，且无权控制图片生命周期；适合 CDN 托管的静态资源，或第三方图标
• Base64 编码（src="data:image/png;base64,iVBOR..."）：只适合极小图标（
• 本地文件路径加 file:/// 前缀（如 file:///C:/pics/test.jpg）：仅限本地临时预览，发给别人或放服务器就彻底失效

alt 不是可选项，而是必填项且必须有意义

没写 alt 不影响图片显示，但会触发可访问性警告，屏幕阅读器读不出内容，搜索引擎也不理解这张图在说什么。更关键的是：当路径出错时，alt 文本就是你唯一能确认“这里该有图”的线索。

• 别写 alt="" 或 alt="图片" 这类空泛描述
• 写清楚内容和作用，例如：alt="微信公众号二维码，扫码关注获取更新"、alt="产品主图：黑色MacBook Pro侧面特写"
• 纯装饰性图片（如分隔线、背景花边）才用 alt=""，但更推荐用 CSS background-image 实现

路径问题本质是文件系统定位问题，不是语法问题。每次插图前，先用文件管理器确认 HTML 和图片的实际相对位置，比反复试错快得多。最常被忽略的一点：路径区分大小写，IMG.JPG 和 img.jpg 在 Linux 服务器上就是两个文件。