vue 前端 require动态引入图片报错Error: Cannot find ‘@/static/image/xxx.png‘
vue 前端 require动态引入图片报错Error: Cannot find '@/static/image/xxx.png'
·
在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);
更多推荐
已为社区贡献1条内容
所有评论(0)