无法从VueJS中的道具要求（）可变路径

Question

我正在发送数据 - 本地图像文件的 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

Answer 1

问题应该是require在编译时由 webpack 静态处理，而 prop 中的值在运行时解析img.src = require(this.item.src); // This does not work since during webpack build the path is not resolvedimg.src = require("../../../assets/img.png") // This works since the image is loaded and added statically请参阅此答案以获得更清晰的webpack dynamic module loader by require您可以尝试使用动态导入语法来加载带有变量的图像，但如果您不使用 vue cli，则必须修改 webpack 配置 [可能]它会是这样的import(this.item.src).then(src => img.src=src)；但应该在mounted()函数中调用，也许