Vue中img标签src拼接变量与文本后图片不显示，求排查原因

这个问题我之前也踩过坑！核心原因是Webpack对静态资源的处理机制：当你用静态字符串写src="../assets/xxx.jpeg"时，Webpack会在打包过程中识别这个路径，把图片文件复制到输出目录（比如dist/assets），同时自动替换src属性为打包后的正确路径。但你用动态拼接字符串:src="'../assets/'+item.picture"时，Webpack没办法提前解析这个动态生成的路径，也就不会处理对应的图片文件，导致浏览器请求的路径是原始的../assets/xxx.jpeg，但这个路径在打包后的项目里并不存在，所以图片加载失败。

下面给你几个可行的解决方案：

方案1：使用require()动态导入图片 #

通过require()包裹路径，让Webpack能识别并处理这个动态模块：

<img :src="require('../assets/' + item.picture)" alt="">

注意：这种方式要求item.picture必须是确定的文件名（比如6cb38c91115bcdf0c824124e4b5ecb71.jpeg），不能是嵌套过深的变量，Webpack需要能解析到具体的文件路径。

方案2：将图片放在public目录下 #

如果你的项目有public目录（Vue CLI默认生成的），可以把图片移到public/assets或者public/images下，然后直接用根相对路径拼接：

<!-- 假设图片放在public/images/目录下 -->
<img :src="'/images/' + item.picture" alt="">

public目录下的资源不会被Webpack编译，会直接复制到打包后的根目录，所以这个路径在浏览器中能直接访问到对应的图片文件。

方案3：预先在data中导入图片 #

如果你的图片数量不多，也可以在组件的data里先导入所有需要的图片，然后直接绑定对应的变量：

<script>
import targetImg from '../assets/6cb38c91115bcdf0c824124e4b5ecb71.jpeg'
// 其他图片同理导入

export default {
  data() {
    return {
      items: [
        { picture: targetImg },
        // 其他项...
      ]
    }
  }
}
</script>

<template>
  <img :src="item.picture" alt="" v-for="item in items" :key="item.picture">
</template>

这种方式最稳妥，Webpack会提前处理所有导入的图片，路径绝对不会出错。

你可以根据自己的项目情况选择其中一种方案，一般方案1和方案2用得比较多～

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