關于vue單文件中引用路徑的處理方法

前言

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

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

<template>
 <div id="app">
 <!-- 1. 模版中src選項直接寫相對路徑 -->
 <img src="./assets/small.png" alt="圖片相對路徑測試">
 <!-- 2. 模版中src選項綁定相對路徑字符串 -->
 <img :src="relative_img" alt="圖片相對路徑測試">
 <!-- 3. 模版中src選項綁定html絕對路徑字符串 -->
 <img :src="absolute_img" alt="圖片絕對路徑測試">
 <!-- 4. 模版中src選項綁定手動加載的圖片資源 -->
 <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 標簽在 vue 單文件組件中引用圖片資源的方式。當然，這四種方式并不是都可以正確的加載圖片資源。

情況一：

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

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

將會被 vue 模版編譯器編譯為：

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

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

情況二：

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

情況三：

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

情況四：

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

綜上，在 vue 單文件組件中，正確的顯示一個圖片的關鍵：

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

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

開發中可能遇到的問題：

開發中可能會遇到循環渲染一個圖片列表的場景，根據上面的總結，我們可以構造一個圖片信息對象數組，比如：

<template>
 <div id="app">
 <!-- 1. 模版中 src 選項直接寫相對路徑 -->
 <img src="./assets/small.png" alt="圖片相對路徑測試">
 <!-- 2. 模版中 src 選項綁定相對路徑字符串 -->
 <img :src="relative_img" alt="圖片相對路徑測試">
 <!-- 3. 模版中 src 選項綁定絕對路徑字符串 -->
 <img :src="absolute_img" alt="圖片絕對路徑測試">
 <!-- 4. 模版中 src 選項綁定手動加載的圖片資源 -->
 <img :src="smallImg" alt="圖片測試">
 <!-- 5. 循環加載圖片資源示例 -->
 <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>

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

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。