HTML图片链接路径配置失效无法正常加载问题求助

问题核心是静态资源路径和前端构建工具的解析规则不匹配：CSS路径能正常生效是因为CSS文件会经过构建工具的路径自动解析转换，HTML内写的硬编码路径如果不符合规则就会直接返回404，以下是可直接落地的配置方法：

按图片存放位置选对应写法 #

• 图片放在项目public/images目录下
  这是最常见的静态资源存放位置，路径里绝对不能带public层级，直接以站点根路径开头写即可：

  <!-- 正确写法 -->
  <img src="/images/你的图片文件名.jpg" alt="页脚图">
  

  之前尝试的/public/images、../public/images都是错误写法——构建工具打包时会把public目录下的所有文件直接拷贝到产物的根目录，部署后根本不存在public这一层路径，自然加载失败。也不要随便加../做相对路径跳转，很容易因为页面路由层级变化导致路径失效。
• 图片放在src/assets/images这类源码目录下
  不要写硬编码路径，需要先把图片作为模块导入再使用，以Vue/React项目为例：

  // 脚本部分先引入资源
  import footerLogo from '@/assets/images/footer-logo.jpg'
  

  <!-- 模板中绑定引入的变量 -->
  <img :src="footerLogo" alt="页脚logo">
  

  如果是完全不用构建工具的原生HTML项目，直接按当前HTML文件的实际位置写相对路径即可，比如HTML文件在/pages/about.html，图片在/images/foo.jpg，就写../images/foo.jpg。

失效快速排查步骤 #

• 按F12打开浏览器开发者工具，切到「网络」面板刷新页面，找到加载失败的图片请求，看实际发起请求的完整路径是什么，对照服务器上实际存放图片的目录，核对多了或者少了哪一层路径
• 检查文件名大小写：Linux服务器默认大小写敏感，Logo.png和logo.png会被识别为两个不同文件，本地Windows开发不报错不代表线上能正常加载
• 不要直接照搬CSS里的相对路径：CSS的相对路径是相对于当前CSS文件的位置解析的，HTML的相对路径是相对于当前页面的访问URL解析的，两者的解析基准完全不一样
• 如果项目用了history路由模式，检查服务器是否配置了静态资源白名单，避免图片请求被前端路由拦截返回首页内容

内容的提问来源于stack exchange，提问作者Todd Eldridge