Rails应用使用Bootstrap Hero组件时img标签图片路径失效问题

原生<img>标签路径加载失败的核心原因 #

你写的路径不符合Rails静态资源映射规则，同时未兼容Assets管道的指纹机制：

• Rails不会把app/assets/images/目录映射到/images/路由下，Assets管道会把images、stylesheets、javascripts等资源目录下的文件统一挂载到/assets/路径下，直接写/images/test2.png必然返回404。
• 生产环境下Rails编译静态资源时，会给文件名追加MD5指纹（比如test2.png会编译为test2-a1b2c3d4.png），硬编码固定文件名的路径在生产环境会直接失效。

如果你坚持要用原生<img>标签，有两种可行写法：

• 不走Assets管道的硬编码方案：把test2.png放到项目public/images/目录下，这时候你原来写的src="/images/test2.png"可以正常加载——public目录下的文件会直接作为静态资源对外暴露，不会被追加指纹，但这种方式无法享受Assets管道提供的压缩、缓存优化能力，不推荐。
• 兼容开发/生产环境的方案：不要硬编码src路径，用Rails内置的asset_path辅助方法动态输出正确的资源地址，代码如下：

<img src="<%= asset_path('test2.png') %>" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy">

这种写法会自动适配开发环境的无指纹路径和生产环境的带指纹路径，只要把图片放在app/assets/images/目录下就能正常加载。

关于image_tag的使用误区 #

你之前认为image_tag不支持width、height、loading这类自定义HTML属性是错误的，image_tag的第二个参数支持传入任意键值对，会自动渲染成对应HTML属性，而且天生适配Assets管道的路径规则，不需要手动处理路径问题，是Rails项目里引入图片的首选方案，适配你当前Bootstrap Hero组件的写法如下：

<div class="px-4 pt-5 my-5 text-center border-bottom">
    <h1 class="display-4 fw-bold">Centered screenshot</h1>
    <div class="col-lg-6 mx-auto">
      <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
      <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
        <button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button>
        <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
      </div>
    </div>
    <div class="overflow-hidden" style="max-height: 30vh;">
      <div class="container px-5">
        <%= image_tag "test2.png",
          class: "img-fluid border rounded-3 shadow-lg mb-4",
          alt: "Example image",
          width: "700",
          height: "500",
          loading: "lazy"
        %>
      </div>
    </div>
</div>

排错提示：如果按照上述写法仍然加载失败，先确认test2.png确实存放在app/assets/images/（走Assets管道方案）或public/images/（硬编码方案）目录下，文件名大小写完全匹配，再清除浏览器缓存重试即可。

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