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>

這樣咱們就能夠完美的顯示咱們循環渲染的圖片了。