Vue.js中如何动态绑定图片src？图片无法显示问题排查

问题原因 #

在Vue组件中使用:src动态绑定图片路径时，直接写相对字符串（比如../assets/benefits-icon.svg）不会被Webpack解析。静态src会被Webpack处理为打包后的资源路径，但动态绑定的纯文本路径会被浏览器当作相对当前页面的URL去请求，自然找不到正确的资源文件。

解决方法 #

方法1：用require()包裹路径 #

在data的数组中，给图片路径加上require()，让Webpack提前解析资源并生成正确的打包路径：

data() {
  return {
    benefits: [
      {
        icon: require('../assets/benefits-icon.svg'),
        alt: 'benefits',
        title: 'plain text',
        content: 'plain text'
      },
    ]
  }
}

方法2：将图片放到public目录 #

如果把图片移到项目根目录的public文件夹下，就可以直接使用根相对路径（不需要Webpack处理）：

// 假设图片路径是 public/benefits-icon.svg
icon: '/benefits-icon.svg'

路径验证技巧 #

• 静态路径测试：在模板里写静态<img src="../assets/benefits-icon.svg">，如果能显示，说明相对路径层级没问题；如果也不显示，说明路径写错了（比如嵌套组件可能需要../../assets）。
• 查看打包产物：执行npm run build后，打开dist/assets目录，确认目标svg是否存在，同时查看生成的资源文件名（Webpack会给资源加哈希后缀），对比请求路径是否匹配。
• 浏览器控制台排查：打开开发者工具的Network面板，刷新页面后查看图片请求的状态。如果是404，说明路径错误，根据控制台显示的请求地址调整路径层级。

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