js的require变量找不到图片

出问题的代码

getDeviceInfo() {
                let reqData = {
                    partId: this.partId
                }
                this.$request('/project/powerNet/screen/getPdPartDeviceInfoList', 'GET', reqData).then((res) => {

                    let result = JSON.parse(JSON.stringify(res.data));
                    console.log(result);
                    result.forEach(x => {
                        let str = '@/static/' + x.deviceType + '.png'
                        this.deviceList.push({
                            title: x.title,
                            deviceInfo: x.deviceName + ': ' + x.deviceData + x.deviceUnit,
                            name: require(str)
                        })
                    })
                })
            }

image.png

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

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

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

参考地址：https://blog.csdn.net/qq_44695769/article/details/131451975