本地HTML项目跨目录引用图片无法显示问题排查

核心结论 #

• HTML原生支持直接引用其他子目录内的图片，不需要将图片副本放置在index.html同级目录。单独创建photos目录统一存放图片资源本身就是静态站点的通用最佳实践，不存在兼容性问题。

加载失败的根本原因 #

你当前的图片路径写法错误：
你为三个图片设置的src属性均以/开头，属于站点根路径寻址写法：

<!-- 错误写法 -->
<img src="/photos/spaghettiAglio1200x1800.jpeg">

这种写法只有当项目被直接部署在域名根目录（即访问地址为https://你的域名/index.html）时才能正确匹配资源。如果你是本地双击打开HTML文件预览、或是后续将项目部署在域名子路径下，开头的/会直接指向系统磁盘/站点的最顶层目录，无法定位到odin-recipes文件夹下的photos子目录，自然会出现图片加载失败的问题。

修复方案 #

参考你当前引用CSS、食谱子页面的相对路径写法（你写的href="index.css"、href="recipes/spaghettiAglio.html"都是正确的相对路径格式），去掉图片路径开头的斜杠即可：

<!-- 修正后写法 -->
<div class="images">
    <span> <img src="photos/spaghettiAglio1200x1800.jpeg"> </span>
    <span> <img src="photos/gyudon1200x1800.jpeg"> </span>
    <span> <img src="photos/caldereta1200x1800.jpeg"> </span>
</div>

额外结构优化建议 #

你当前代码中用于控制宽度的resize div被写在了<body>标签外部，不符合HTML语法规范，虽然多数浏览器会自动容错，但仍建议调整标签顺序：将<body>起始标签移动到resize div的前面，</body>闭合标签移动到resize div闭合标签的后面，避免出现不可预期的渲染异常。

内容的提问来源于stack exchange，提问作者Daniel M.