Vue.js中使用字符串插值绑定图片src为何本地图片无法显示？

嘿，这个问题我太熟悉了！之前在Vue项目里踩过一模一样的坑，咱们来拆解一下原因和解决办法：

为什么静态路径能显示，动态拼接不行？ #

当你直接写死src="../../assets/images/googlestore.png"的时候，Vue背后的webpack打包工具会在编译阶段就识别到这个资源路径，自动把它转换成打包后对应的资源地址（比如变成/img/googlestore.abc123.png这种带哈希的路径）。

但你用字符串插值:src="../../assets/images/${category.imgUrl}.jpeg"的时候，webpack没办法在编译时预知${category.imgUrl}的值是什么，它没法提前把这些图片资源打包进去，所以最终浏览器拿到的就是你写的原始相对路径，自然找不到对应的图片文件。

几种可行的解决办法 #

1. 把图片放到public目录下 #

如果你的项目有public文件夹（Vue-cli创建的项目默认有），可以把图片移到public/images目录下，然后动态拼接绝对路径：

<img :src="`/images/${category.imgUrl}.jpeg`" :alt="category.name">

public目录下的资源不会被webpack处理，会原封不动复制到打包后的根目录，所以这种方式下动态拼接的路径能直接指向正确的资源。

2. 使用require()动态引入assets里的图片 #

如果你想继续把图片放在assets目录下，可以用require()来让webpack识别到资源：

<img :src="require(`../../assets/images/${category.imgUrl}.jpeg`)" :alt="category.name">

这里要注意：require()里的路径不能全是变量，必须有一部分是静态字符串（比如../../assets/images/这部分是固定的），这样webpack才能在编译时扫描到对应的图片文件并打包。

3. 提前import图片到组件中 #

另一种方式是在组件里提前把需要的图片import进来，然后绑定到数据中：

// 在组件的script部分
import googleStoreImg from '../../assets/images/googlestore.png'
import appleStoreImg from '../../assets/images/applestore.png'

export default {
  data() {
    return {
      categories: [
        { name: 'Google Play', imgUrl: googleStoreImg },
        { name: 'App Store', imgUrl: appleStoreImg }
      ]
    }
  }
}

然后在模板里直接绑定：

<img :src="category.imgUrl" :alt="category.name">

这种方式适合图片数量不多、提前知道需要哪些图片的场景，webpack会自动处理这些import的资源。

总结 #

核心问题就是webpack编译时的资源解析机制——静态路径能被识别打包，动态字符串不行。选上面任意一种方法都能解决你的问题，根据你的项目场景来选就好~

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