猿问

无法从VueJS中的道具要求()可变路径

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


HUX布斯
浏览 129回答 1
微课
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()函数中调用,也许
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答