1我們在vue中使用圖片大概有以下幾種姿勢
1 在vue的template中 引用 
屬於靜態引用 一般不會有什么問題
2 在vue的css中 引用 background: url(../../../assets/imgs/close.png) 0 0 no-repeat; 屬於靜態引用 一般不會有什么問題
3 在template中動態引用 
此處場景舉例： 在for循環中 動態引用圖片，根據server返回的不同的文件名來確定用不同的圖片 屬於動態引用一般會出問題
那么，vue/webpack 中的圖片到底是如何引用的呢（補充一些基礎知識）
首先 npm run dev
webpack其實是把我們代碼編譯到內存中運行，而不是直接跑的源碼
關於圖片的引用可以 查看
// url-loader配置
// build/webpck.base.conf.js
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
以上代碼的意思是 如果圖片小魚10000b 就打成base64 否則 打包放進【當前目錄】下的static/img/下 並且引用的圖片的名字 改為 原來的圖片名字+hash值+后綴名
當前目錄：打包后的目錄一般是dist目錄下對應的js目錄，而不是src目錄
解決辦法 兩種
利用static目錄 ，而不是把圖片放到別的地方，比如你自己新建一個img文件夾，在動態引用是無效的
js動態生成的路徑無法被url-loader解析到，如果你去build，會發現圖片甚至不會打包輸出到dist目錄（webpack是按需打包的）。
如果你是vue-cli初始化的項目，解決的辦法：
第一步，把圖片放到src同級的static目錄（build/build.js文件中有一段代碼是把static目錄拷貝到dist/static的），比如圖片放在static/a.png
第二步，js中使用/static/a.png去引用就行了。
粗暴引用 我就是想把圖片放到我想放的任意地方，就不放到根目錄下的static 怎么辦，就是動態引用路徑的時候直接靜態引用圖片
在 build下dev-server.js中
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))
可以看出 ./static 被靜態化了
assetsPublicPath = /
assetsSubDirectory = static
所以
staticpath = /static
這里有個取巧的地方就是 源碼根目錄下有個static文件夾， 打包后的dist目錄下的靜態文件夾也叫做static
比如我們的圖片資源放到src下的assets下 那么我們只需要加上下面這行
app.use(staticPath, express.static('./src/assets')) 相當於 把 src/assets 這個目錄 靜態化 並映射到ip:port/static 下
可能有點問題
還有一點需要注意的是 當服務器運行起來，根目錄下有個static文件夾，
那么我們通過 絕對路徑訪問 /static 沒問題
相對路徑 訪問 ./static/ ../../static/ ../../../static 如果你按照正常相對路徑向上層級跳轉 是沒問題的，此時相當於你是實際要訪問這個目錄
可是如果你多跳了，不如 static 在你的上兩級 ，而 你../../../../static 了四次，那么也是沒問題的，因為此時服務器認為你要訪問的是 它代理的目錄