在Vue中,Image组件的source如果使用require方式引入图片资源,则必须使用静态的字符串,不能使用变量,因为require是编译时执行的,而非运行时执行!

下面来说说ES6的require

关于es6的require添加动态变化的路径

直接静态写死是不会有错误的:

let imgUrl = require('../images/a.png');

但是如果你尝试着:

var imgUrl = "../images/b.jpg";

let img = require(imgUrl);

或者这样动态变化:

require(`../../assets/images/${showAllExpended?'unfold':'up'}.png`

那就只能报错了(因为require它是打包工具所需要的标识,你搞成运行时通过变量去定义的话,它就没办法打包了啊)

解决方法:​

而require里的正确的格式必须是path

可以这么写

var imgUrl = "a";

let img = require('../images/'+imgUrl+'.jpg');

当然最好这么写:imgUrl 为图片名称即可,相对路径与绝对路径不能加。

var imgUrl = "b.jpeg";

let img = require('../images/'+imgUrl);

Logo

前往低代码交流专区

更多推荐