在基於 vue-cli 實際開發過程中，很多小夥伴都會遇到關於圖片顯示的困擾，不管怎麼設定，圖片就是顯示不出來，今天我們來詳細說說這個問題。

圖片無法顯示，絕大部門的情況是圖片路徑問題，要搞懂路徑問題，分別有相對路徑與絕對路徑

實際開發中使用圖片最多的場景有以下三種：

1、手動引入

  <template>
    <img :src="imgurl" />
  </template>
  <script>
    import logo from '../img/logo.png'
    // 或
    const logo = require('../img/logo.png');
    export default{
      data(){
        return {
          imgurl:logo
        }
      }
    }
  </script>

使用require或import方式引入圖片時，引入路徑是相對於當前檔案路徑的，編譯時webpack會介入並把路徑處理成伺服器絕路徑

2、相對路徑

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

在 vue-cli 中使用相對路徑時，webpack會自動介入，上面的程式碼在編譯時自動變成

<img src="require('../img/logo.png')"

最終在頁面的顯示效果與以上手動引入方式一致

3、絕對路徑

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

使用絕對路徑，首先要了解伺服器根目錄在哪，大家都知道，在 vue-cli

最終顯示效果

4、資料中的圖片

 <template>
    <ul>
      <li><img :src="item.imgurl" v-for="item in goodslist" /></li>
    </ul>
  </template>
  <script>
    export default{
      data(){
        return {
          goodslist:[{name:'goods1',imgurl:'../img/goods1.png'},{name:'goods2',imgurl:'../img/goods2.png'},{name:'goods3',imgurl:'../img/goods3.png'},]
        }
      }
    }
  </script>

這種情況應該是最常見的（ajax請求資料回來，然後遍歷寫入到頁面結構中），這個時候繫結到 src 屬性的是一個變數，無法直接手動 import 或 require ，如果直接使用 imgurl 屬性中的路徑， webpack不會介入處理 ，所以以上程式碼是無法正常顯示圖片的，解決方法如下：

方法1：遍歷資料，使用前先手動 require

在前端，模組的引入預設是不支援動態引入的（即不支援：require(變數)），如下

 this.goodslist = this.goodslist.map(item=>{
    // 雖然路徑是正確的，但以下方式引入會報`Cannot find module '../assets/logo.png'`
    // item.imgurl = require(item.imgurl);

    // 正確的方式為
    item.imgurl = require('../img'+item.imgurl.replace('../img',''))
    return item;
  })

有小夥伴可能會覺得奇怪，為什麼這樣做就可以了，Webpack 在處理動態名稱模組名的時候，會直接將能識別的靜態路徑和路徑下的所有子檔案都作為模組處理，如： require('../img'+imgName) ，能識別到 ../img 目錄，並將該目錄下所有檔案當做模組處理，做成一個Map對映以便後面進行匹配，所以能識別到對應的檔案，其原理是 require.context ，屬性如下：

require.context(directory,useSubdirectories,regExp)

• directory {String} -讀取檔案的路徑（一般為一個目錄）
• useSubdirectories {Boolean} -是否遍歷檔案的子目錄，預設false
• regExp {RegExp} -匹配檔案的正則，預設匹配所有檔案

方法返回一個函式（假設為fn），傳入圖片路徑（不包含directory的路徑）可得到處理過的圖片對應路徑（如：fn('./goods1.png')，） ，上面的程式碼等效於

this.goodslist = this.goodslist.map(item=>{
    const fn = require.context('../img',false,/^\./);
    const file = item.replace('../img','.')
    item.imgurl = fn(file);
    return item;
  })

方法2：在資料庫端直接使用絕對路徑，並把所需圖片放到 public 目錄中

imgurl的格式為: '/img/goods1.png'

到此這篇關於徹底搞懂並解決vue-cli4中圖片顯示的問題實現的文章就介紹到這了,更多相關vue-cli4 圖片顯示 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！