在Vue項目中通過data設置圖片路徑，然后在template中引入后頁面無法顯示圖片，瀏覽器控制台報錯：
剛開始以為是路徑出問題了，於是絕對路徑、相對路徑各種辦法試了一遍，發現還是報錯，后來才發現這是因為在Vue里動態生成的路徑無法被url-loader解析到，此時有兩種解決方法：
方法一.直接將你的圖片源文件放在項目目錄的static文件夾里，然后和正常寫圖片路徑那樣寫就可以了：
方法二.通過import的方法將圖片源路徑引入，如下圖所示：
需要注意的是：在Vue里圖片是通過v-bind綁定src屬性的，所以template模板上的img標簽並不是src=""，而是v-bind:src=""或簡寫為:src=""，如果這里寫錯了，那無論如何都無法正常引入圖片。
方法三.采用背景圖做法，通過data將圖片源路徑引入，利用內聯樣式。如下代碼所示：
<div :style="imgStyle"></div>
data () {
imgStyle: {
backgroundImage：`url(${require('@/assets/images/xxx.png')})`
}
}
如此也可將圖片正常引入項目中並作為背景圖使用。