无法从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 workimg.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 resolved

img.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()函数中调用，也许