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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容