vue中图片动态加载

assets：在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相对资源路径，将有webpack解析为模块依赖

用js动态加载assets或者本文件的图片出现404的状态码

var html = '<div class="nodata"><img src="../../../../assets/images/nodata.png" /></div>';
_document.getElementById("PartyActivity").innerHTML = html;

原因：在webpack中会将图片图片来当做模块来用，因为是动态加载的，所以url-loader将无法解析图片地址，然后npm run dev 或者npm run build之后导致路径没有被加工【被webpack解析到的路径都会被解析为/static/img/[filename].png，完整地址为localhost:8080/static/img/[filename].png】

解决办法：

data() {
return {
imgsrc: require("../../../../assets/images/nodata.png"),//将图片作为模块加载进去
};
},

var html ='<div class="nodata"><img src=' + this.imgsrc + '></div>';
_document.getElementById("PartyActivity").innerHTML = html;

来源：https://www.cnblogs.com/yyjspace/p/11764604.html