vue中,使用require加载本地图片报错

问题

image.png

在图层蒙版组件中,需要接受父组件传imgurl值展示。使用props传入图片地址时,发现require该地址是获得不了图片的。需要将完整地址切割为"@/assets/" + 剩余地址 才能正确获得。
因为 webpack本身是一个预编译的打包工具,无法预测未知变量路径 不能require纯变量路径。
require(path) ,path 至少要有三部分组成, 目录+文件名+后缀
目录 => webpack 才知道从哪里开始查找
后缀 => 文件后缀,必须要加上,不然会报错
文件名 => 可用变量表示
使用value.svg = require(’@/assets/’ + item.svg ) // 不能完全使用变量,前置地址必须是静态地址,否则会报错
参考链接:https://blog.csdn.net/teddyWithPig/article/details/110947630

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

推荐阅读更多精彩内容