在写vue中,需要在js中动态引用图像地址。刚开始如下:
let path = '@/images/test/car'+index+'.png'
let imgpath = require(path)
原因为 webpack本身是一个预编译的打包工具,无法预测未知变量路径 不能require纯变量路径,所以前置地址必须是静止的。注意,就算使用es6的模板字符串,改为require(`${path}`)也不行。
解决方法:
let path = 'car'+index+'.png'
let imgpath = require('@/images/test/'+path)
require(path) 的path 至少要有三部分组成, 目录+文件名+后缀
目录 : webpack 才知道从哪里开始查找
后缀 : 文件后缀,必须要加上,不然会报错
文件名 : 可用变量表示