前言

Vue 的單文件組件在使用 Vue 時(shí)非常常用，而在vue單文件的開發(fā)過程中，在單文件模版中可能會(huì)涉及到文件路徑的處理，比如 <img>, style 中的 background 的處理等。下文中討論了幾種不同場景下的 <img> 的 src 處理，解釋了在使用 vue+webpack 的開發(fā)過程中如何正確的引用靜態(tài)資源（比如圖片的處理）。

如下所示，在下面的單文件組件中給出了不同場景下引用圖片路徑的示例（圖片靜態(tài)資源存放在 src/assets/small.png ）：

<template>
 <div id="app">
 <!-- 1. 模版中src選項(xiàng)直接寫相對(duì)路徑 -->
 <img src="./assets/small.png" alt="圖片相對(duì)路徑測試">
 <!-- 2. 模版中src選項(xiàng)綁定相對(duì)路徑字符串 -->
 <img :src="relative_img" alt="圖片相對(duì)路徑測試">
 <!-- 3. 模版中src選項(xiàng)綁定html絕對(duì)路徑字符串 -->
 <img :src="absolute_img" alt="圖片絕對(duì)路徑測試">
 <!-- 4. 模版中src選項(xiàng)綁定手動(dòng)加載的圖片資源 -->
 <img :src="smallImg" alt="圖片資源測試">
 </div>
</template>
<script>
import smallImg from './assets/small.png';
export default {
 name: 'app',
 data() {
 return {
 smallImg: smallImg,
 relative_img: './assets/small.png',
 absolute_img: '/static/img/small.png',
 };
 },
}
</script>

上述代碼片段給出了四種場景下使用 img 標(biāo)簽在 vue 單文件組件中引用圖片資源的方式。當(dāng)然，這四種方式并不是都可以正確的加載圖片資源。

情況一：

在模版中直接以相對(duì)路徑綁定到src屬性，這種情況下可以正確加載圖片資源。我們知道，在 webpack 處理 vue 單文件組件的過程中，主要是 vue-loader 來做針對(duì) *.vue 文件的處理。vue-loader 的文檔中 vue-loader 的資源路徑處理一節(jié)給出了 vue-loader 是如何處理模版中的資源路徑的。比如： <img src="">, background: url(), @import等都將被作為模塊依賴處理。也就是說這幾種情況下 vue-loader 自動(dòng)處理路徑的資源引用以及最后的路徑替換。其中對(duì) img 的處理如下：

<img src="./logo.png">

將會(huì)被 vue 模版編譯器編譯為：

createElement('img', { attrs: { src: require('./logo.png') }})

這也就解釋了為什么情況一可以正確顯示圖片內(nèi)容，是因?yàn)?vue-loader 自動(dòng)幫我們做了資源引入以及路徑替換問題。

情況二：

在模版中給 src 屬性綁定了相對(duì)路徑字符串變量，這種情況下圖片無法正常顯示。原因在于 vue-loader 無法識(shí)別變量是否為路徑字符串，因此也就不存在 vue-loader 自動(dòng)引入資源以及路徑替換的問題了。這種情況下，編譯后的模版依然為相對(duì)路徑字符串。很顯然，沒有相應(yīng)的資源引入以及錯(cuò)誤的路徑，是無法正確的展示圖片的。

情況三：

很多人在相對(duì)路徑無法正確顯示的同時(shí)，嘗試進(jìn)行了使用絕對(duì)路徑變量引入，顯然這種情況下也是不能顯示圖片的，因?yàn)閳D片資源未被手動(dòng)引入。注意： 很多同學(xué)嘗試手動(dòng)引入資源然后按照絕對(duì)路徑變量綁定 src，發(fā)現(xiàn) dist/static/img/ 路徑下確實(shí)有了被引用的資源，但是 vue-cli webpack 模版中 url-loader 對(duì)于 img 類型的文件在加載時(shí)，添加了 hash 值的處理。在這種情況下，即使我們綁定的是絕對(duì)路徑變量，因?yàn)闊o法正確匹配被添加 hash 值的圖片文件，我們還是無法正確的引用到圖片。在這種需要手動(dòng)引入圖片的情況下，推薦情況四的處理方式。

情況四：

在模版中 src 屬性直接綁定手動(dòng)引入的圖片資源，這種情況下可以正確的顯示圖片。這樣的方式也是 vue-loader 在處理自動(dòng)引入路徑對(duì)應(yīng)的資源時(shí)使用的辦法。

綜上，在 vue 單文件組件中，正確的顯示一個(gè)圖片的關(guān)鍵：

• 該圖片資源被 require 或 import ，即會(huì)被 webpack 的 url-loader 處理到最后的目錄中
• img src 屬性需要被替換為最后的圖片資源路徑

以上兩點(diǎn)缺一不可。情況一以及情況四最后之所以能夠正確的顯示了圖片，就在于兩種情況下滿足了以上兩個(gè)條件。情況一中 vue-loader 自動(dòng)幫我們做了這個(gè)事情，情況四我們手動(dòng)做了這個(gè)事情。

開發(fā)中可能遇到的問題：

開發(fā)中可能會(huì)遇到循環(huán)渲染一個(gè)圖片列表的場景，根據(jù)上面的總結(jié)，我們可以構(gòu)造一個(gè)圖片信息對(duì)象數(shù)組，比如：

<template>
 <div id="app">
 <!-- 1. 模版中 src 選項(xiàng)直接寫相對(duì)路徑 -->
 <img src="./assets/small.png" alt="圖片相對(duì)路徑測試">
 <!-- 2. 模版中 src 選項(xiàng)綁定相對(duì)路徑字符串 -->
 <img :src="relative_img" alt="圖片相對(duì)路徑測試">
 <!-- 3. 模版中 src 選項(xiàng)綁定絕對(duì)路徑字符串 -->
 <img :src="absolute_img" alt="圖片絕對(duì)路徑測試">
 <!-- 4. 模版中 src 選項(xiàng)綁定手動(dòng)加載的圖片資源 -->
 <img :src="smallImg" alt="圖片測試">
 <!-- 5. 循環(huán)加載圖片資源示例 -->
 <img
 v-for="image in imgList"
 :key="image.id"
 :src="image.src"
 :alt="image.title">
 </div>
</template>
<script>
import smallImg from './assets/small.png';
import bigImg from './assets/big.jpg';
export default {
 name: 'app',
 data() {
 return {
 smallImg: smallImg,
 relative_img: './assets/small.png',
 absolute_img: '/static/img/small.png',
 imgList: [
 { id: 1, title: 'test1', src: require('./assets/logo1.png') },
 { id: 2, title: 'test2', src: require('./assets/logo2.png') },
 { id: 3, title: 'test3', src: require('./assets/logo3.png') },
 ],
 };
 },
}
</script>

這樣我們就可以完美的顯示我們循環(huán)渲染的圖片了。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。