无法从 VueJS 中的 props 中 require() 变量路径答案

【问题标题】：Unable to require() a variable path from props in VueJS无法从 VueJS 中的 props 中 require() 变量路径
【发布时间】：2020-02-09 14:12:53
【问题描述】：

我正在发送数据 - 本地图像文件的 URL，从父到子，当我在子组件中加载它时显示错误，但如果我直接加载它，它可以工作。

代码：

在 parent.vue 组件的数据中：

data(){return{items:[
      {id:1, src:"../../../assets/img.png" }

在child.vue组件的mounted()中

img.src = require(this.item.src); // This does not work
img.src = require("../../../assets/img.png") // This works

并且console.log(this.item.src)给出完全相同的字符串，所以孩子实际上是在正确获取数据

如您所见，这两个示例都有相同的 URL 字符串，但一个有效，一个无效。我已经尝试了所有组合或相关 URL，但一切都失败了。

发生了什么事？

注意：我通过webpack-dev-server提供开发版本

【问题讨论】：

标签： javascript vue.js webpack

【解决方案1】：

问题应该是require在编译时被webpack静态处理，而prop中的值在运行时解析

img.src = require(this.item.src); // This does not work since during webpack build the path is not resolved
img.src = require("../../../assets/img.png") // This works since the image is loaded and added statically

请参阅此答案以更清楚地了解webpack dynamic module loader by require

您可以尝试使用dynamic import 语法来加载带有变量的图像，但如果您不使用 vue cli，则必须修改 webpack 配置 [可能]

类似于import(this.item.src).then(src => img.src=src);但应该在mounted() 函数中调用，也许

【讨论】：