Vue 动态require参数传入找不到文件地址

遇到的问题

代码

<view id="DeviceImg"  :style="{'background-image':`url(${deviceImgUrl})`}" >

Mystr = '@/static/img/index/device_test/A.png'
// console.log(Mystr)
this.deviceImgUrl =require(Mystr)

报错

10:43:17.150 [Vue warn]: Error in mounted hook: "Error: Cannot find module '@/static/img/index/device_test/A.png'"

(found at pages/device/earthBox_1/earthBox_1.vue:1)
10:43:17.154 Error: Cannot find module '@/static/img/index/device_test/A.png'

不能将参数直接传入，但是直接用字符串是可以的

原因

vue项目中，使用require动态加载本地图片报错找不到模块

webpack本身是一个预编译的打包工具，无法预测未知变量路径 不能require纯变量路径。

解决方法

Mystr = 'A.png'
// console.log(Mystr)
//将开头用字符串传入
that.deviceImgUrl =require('@/static/img/index/device_test/'+`${Mystr}`)