Rails 6 (webpack) 内联JS引用asset_pack_tag图片路径错误求助

问题原因 #

image_pack_tag 是用来生成完整 <img> HTML 标签的 helper 方法，不会返回纯资源路径，直接赋值给url字段必然会得到错误结果。

解决方案 #

前提校验 #

先确认你的 svg 图片存放路径为 app/javascript/images/map/icon.svg，这是 Rails 6 webpacker 默认的静态资源存放目录。

方案1：ERB 模板内获取路径 #

将 image_pack_tag 替换为 image_pack_path 即可获取纯资源路径，注意webpacker编译后图片会统一归类到media/images目录下，路径需要加上对应前缀：

let icon = {
  url: '<%= image_pack_path('media/images/map/icon.svg') %>'
}

该方案适用于 .js.erb 模板文件、或者嵌在 .html.erb 内的 script 标签场景。

方案2：纯JS文件内直接引入（更符合webpack规范） #

如果你的脚本是单独的 .js 文件不需要走ERB解析，直接通过import引入图片即可：

// 注意调整相对路径匹配你实际的文件层级
import iconUrl from '../images/map/icon.svg'

let icon = {
  url: iconUrl
}

排查提示 #

• 生产环境部署前必须执行 rails assets:precompile 完成资源编译
• 确认 config/webpacker.yml 配置项没有自定义修改过静态资源的输出路径规则

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