Vue中require使用动态图片路径报错找不到相对模块如何解决

架构老林

2026-9-30

Vue 动态 require 图片报错问题原因及解决方法

问题原因

模板字符串语法使用错误：你当前在require的路径参数中使用单引号包裹包含${}插值的内容，而${}变量插值仅在**反引号（）**包裹的模板字符串中才会生效，你写的路径实际被解析为字面量../assets/blogPhotos/${post.photo}.jpg`，而非替换了变量值的真实路径，因此找不到对应文件。
补充说明：webpack 中的require是编译阶段执行的逻辑，无法处理完全动态的路径，需要保留固定的路径前缀让webpack提前扫描对应目录下的资源，你当前的写法已经保留了固定前缀，只要修正语法即可正常使用。

你替换为固定字符串后正常运行，是因为固定路径在编译阶段就可以被webpack正确识别到对应资源。

解决方法

方法1：直接修正模板中的语法

将BlogPost.vue模板中img标签的路径包裹符号从单引号替换为反引号即可：

<!-- 欢迎页图片 -->
<img v-if="post.welcomeScreen" :src="require(`../assets/blogPhotos/${post.photo}.jpg`)" alt="">
<!-- 普通博客封面图 -->
<img v-else :src="require(`../assets/blogPhotos/${post.blogCoverPhoto}.jpg`)" alt="">

方法2：将动态路径逻辑放到计算属性中处理（更推荐，避免模板中复杂逻辑的解析问题）

在BlogPost.vue的script中新增计算属性：

export default {
  name: 'BlogPost',
  props:['post'],
  computed: {
    blogImgSrc() {
      const fileName = this.post.welcomeScreen ? this.post.photo : this.post.blogCoverPhoto
      return require(`../assets/blogPhotos/${fileName}.jpg`)
    }
  }
}

模板中直接使用计算属性即可：