Django项目单页面图片无法显示问题求助

问题描述 #

我尝试在页面顶部展示一张home图片，但该图片仅在项目的两个页面中的一个无法显示，另一页面可正常加载。在IDE中鼠标悬停图片源链接时，显示路径是正确的，相关截图情况如下：

• IDE截图：鼠标悬停图片src路径时，提示的路径指向正确的图片文件
• 浏览器截图：失效页面中图片无法加载，仅显示alt文本占位符
• 目录结构截图：展示了项目里media/images目录与页面文件的层级关系

用到的代码行：

<p><img src="../media/images/home.png" width="30px" alt="home image">HOME</p>

排查与解决步骤 #

• 核心原因：相对路径层级不匹配
  两个页面大概率处于项目目录的不同层级，比如正常页面在/pages/目录，失效页面在/pages/sub/子目录，这时候../media的相对路径对后者来说会多回退一层，导致找不到图片资源。

• 快速修复：改用根相对路径
  把图片的src属性改成以斜杠开头的根路径，直接从项目根目录定位资源，这样不管页面在哪个层级都能正确加载：

  <p><img src="/media/images/home.png" width="30px" alt="home image">HOME</p>
  

• 验证路径正确性
  打开浏览器开发者工具的「网络」面板，刷新失效页面，查看图片请求的状态：如果是404，说明路径确实错误，对比成功页面的图片请求路径，就能明确层级差异。

• 注意IDE路径提示的局限性
  IDE的路径提示仅基于本地文件的相对位置，如果项目部署后的目录结构（比如虚拟目录、子域名部署）和本地不一致，也会导致路径失效，根相对路径能避免这类问题。

内容的提问来源于stack exchange，提问作者Federico Monetti