在vue單一檔案中有關引用路徑有哪些方法？

這篇文章主要為大家介紹了關於vue單一檔案中引用路徑處理的相關資料，文中透過範例程式碼介紹的非常詳細，對大家學習或使用vue.js具有一定的參考學習價值，需要的朋友們下面隨著我來一起學習學習吧。

前言

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

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

<template>
 <p id="app">
 <!-- 1. 模版中src选项直接写相对路径 -->
 <img src="/static/imghwm/default1.png"  data-src="./assets/small.png"  class="lazy"   alt="图片相对路径测试">
 <!-- 2. 模版中src选项绑定相对路径字符串 -->
 <img src="/static/imghwm/default1.png"  data-src="relative_img"  class="lazy"  : alt="图片相对路径测试">
 <!-- 3. 模版中src选项绑定html绝对路径字符串 -->
 <img src="/static/imghwm/default1.png"  data-src="absolute_img"  class="lazy"  : alt="图片绝对路径测试">
 <!-- 4. 模版中src选项绑定手动加载的图片资源 -->
 <img src="/static/imghwm/default1.png"  data-src="smallImg"  class="lazy"  : alt="图片资源测试">
 </p>
</template>
<script>
import smallImg from &#39;./assets/small.png&#39;;
export default {
 name: &#39;app&#39;,
 data() {
 return {
 smallImg: smallImg,
 relative_img: &#39;./assets/small.png&#39;,
 absolute_img: &#39;/static/img/small.png&#39;,
 };
 },
}
</script>

上述程式碼片段給出了四種場景下使用img 標籤在vue 單一檔案元件中引用圖片資源的方式。當然，這四種方式並不是都可以正確的載入圖片資源。

情況一：

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

<img  src="/static/imghwm/default1.png"  data-src="./logo.png"  class="lazy"   alt="在vue單一檔案中有關引用路徑有哪些方法？" >

將會被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>
 <p id="app">
 <!-- 1. 模版中 src 选项直接写相对路径 -->
 <img src="/static/imghwm/default1.png"  data-src="./assets/small.png"  class="lazy"   alt="图片相对路径测试">
 <!-- 2. 模版中 src 选项绑定相对路径字符串 -->
 <img src="/static/imghwm/default1.png"  data-src="relative_img"  class="lazy"  : alt="图片相对路径测试">
 <!-- 3. 模版中 src 选项绑定绝对路径字符串 -->
 <img src="/static/imghwm/default1.png"  data-src="absolute_img"  class="lazy"  : alt="图片绝对路径测试">
 <!-- 4. 模版中 src 选项绑定手动加载的图片资源 -->
 <img src="/static/imghwm/default1.png"  data-src="smallImg"  class="lazy"  : alt="图片测试">
 <!-- 5. 循环加载图片资源示例 -->
 <img src="/static/imghwm/default1.png"  data-src="image.src"  class="lazy" 
 v-for="image in imgList"
 :key="image.id"
 :
 :alt="image.title">
 </p>
</template>
<script>
import smallImg from &#39;./assets/small.png&#39;;
import bigImg from &#39;./assets/big.jpg&#39;;
export default {
 name: &#39;app&#39;,
 data() {
 return {
 smallImg: smallImg,
 relative_img: &#39;./assets/small.png&#39;,
 absolute_img: &#39;/static/img/small.png&#39;,
 imgList: [
 { id: 1, title: &#39;test1&#39;, src: require(&#39;./assets/logo1.png&#39;) },
 { id: 2, title: &#39;test2&#39;, src: require(&#39;./assets/logo2.png&#39;) },
 { id: 3, title: &#39;test3&#39;, src: require(&#39;./assets/logo3.png&#39;) },
 ],
 };
 },
}
</script>

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

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在jquery中使用輸入框尋找關鍵字

有關Vue中如何換膚？

使用js和jQuery如何實作指定賦值方法#

以上是在vue單一檔案中有關引用路徑有哪些方法？的詳細內容。更多資訊請關注PHP中文網其他相關文章！