pay attention: 書寫本文時vue的版本還是2.X。
在做移動端項目時，底部導航的名稱和圖片習慣于用json文件中引入數(shù)據(jù)。而在vue項目中，當要在<template>中動態(tài)引入圖片時，若直接從json文件中導入item.src字段為'assets/image/XX.png'的值到:src="XXX"中時，會出現(xiàn)圖片404的情況。
如:
<a href="javascript:;" v-for="item in navList">
<img :src="item.src">
</a>
這么循環(huán)引入img圖片，頁面會報404，表明從指定的路徑上去找是找不到圖片的。
如何解決呢？
我們都知道，如果是import 或者 require 圖片路徑進來，將其保存為一個變量，然后再賦值到img標簽上是沒有問題的。有此可見，如果我們將json中的圖片路徑用import或者require的方式包裝。如:src="require('assets/image/my.png')"。ok，找到解決辦法了。但是我們無法在json文件中使用require或import。json是一種通用的跨平臺的數(shù)據(jù)傳輸格式，它支持的是純數(shù)據(jù)。好在我們可以用es6的方法，把數(shù)據(jù)存儲為js文件然后export出去便可。要記住的是，此方法對于src目錄下而言才是管用的。這里所謂的src是指要通過webpack打包的那個根目錄。用這種方法實現(xiàn)，開發(fā)環(huán)境和生產(chǎn)環(huán)境打包都可以很好配置。
如果我們把靜態(tài)圖片資源存放在和src平級的目錄（比如叫static）下，即不存放在webpack要打包的范圍內(nèi)，那么直接引入圖片路徑無需用import或require包裝，這也是ok的。如<img src="/static/my.png" />。由于放在src目錄外，它不被webpack打包進去，如此一來在部署到nginx服務器上時需要單獨scp這個static目錄。
