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;