时间戳

首页 > 解决方案 > 无法从 VueJS 中的 props 中 require() 变量路径

javascript - 无法从 VueJS 中的 props 中 require() 变量路径

问题描述

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

代码：

在 parent.vue 组件的数据中：

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

在 child.vue 组件的 mount()

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

标签： javascriptvue.jswebpack

解决方案

问题应该是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 动态模块加载器

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

它会是这样的import(this.item.src).then(src => img.src=src)；但应该在mounted()函数中调用，也许

推荐阅读