VueJS绑定图片路径到img标签src属性不生效问题求助

问题原因 #

该报错是因为 Vue CLI 默认使用的 webpack 打包工具中，require 是编译时执行的逻辑：

• 直接在模板写 <img src="@/assets/Home.jpg"> 时，Vue CLI 会在编译阶段直接解析 @ 别名，替换为真实的资源路径，同时将对应图片打包到输出目录。
• 当你把路径以字符串形式存在 data 中，再在模板写 require(src) 时，webpack 编译阶段无法识别 src 变量的具体值，不能完成路径解析和资源打包，运行时就会抛出找不到模块的错误。

可行解决方案 #

方案1：在 data 中直接引入资源

不要在 data 中存储路径字符串，直接把 require 的返回值赋值给 src 变量即可：

<template>
  <div class="home">
    <img src="@/assets/Home.jpg" />
    <img :src="src" />
  </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "Home",
  data() {
    return {
      // 编译阶段就完成资源引入和路径解析
      src: require("@/assets/Home.jpg"),
    };
  },
});
</script>

方案2：动态切换图片时保留固定路径前缀

如果你需要根据状态切换不同图片，不要把完整路径作为变量，仅将文件名部分作为动态值，让 webpack 可以静态识别到固定的资源目录：

<template>
  <div class="home">
    <img :src="require(`@/assets/${imgName}.jpg`)" />
  </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "Home",
  data() {
    return {
      imgName: "Home"
    };
  },
});
</script>

方案3：Vite 环境适配

如果你的项目是用 Vite 搭建的，不需要使用 require，改用 new URL 语法即可正常解析：

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "Home",
  data() {
    return {
      src: new URL('@/assets/Home.jpg', import.meta.url).href
    };
  },
});
</script>

内容的提问来源于stack exchange，提问作者Manuel Gonçalves Barroso