在基于 vue-cli 實際開發(fā)過程中，很多小伙伴都會遇到關(guān)于圖片顯示的困擾，不管怎么設(shè)置，圖片就是顯示不出來，今天我們來詳細說說這個問題。

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

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

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方式引入圖片時，引入路徑是相對于當(dāng)前文件路徑的，編譯時webpack會介入并把路徑處理成服務(wù)器絕路徑

2、相對路徑

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

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

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

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

3、絕對路徑

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

使用絕對路徑，首先要了解服務(wù)器根目錄在哪，大家都知道，在 vue-cli 的項目本身自帶一個服務(wù)器的，基于 webpack-dev-server 模塊，根目錄為 public 文件夾，所以，使用 絕對路徑 的方式展示圖片，必須把圖片放到 public 文件夾，這也是最簡單的一種方式，這種方式webpack不會介入，所以最終顯示效果與引入時的代碼一致，代碼如下：

最終顯示效果

4、數(shù)據(jù)中的圖片

 <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>

這種情況應(yīng)該是最常見的（ajax請求數(shù)據(jù)回來，然后遍歷寫入到頁面結(jié)構(gòu)中），這個時候綁定到 src 屬性的是一個變量，無法直接手動 import 或 require ，如果直接使用 imgurl 屬性中的路徑， webpack不會介入處理 ，所以以上代碼是無法正常顯示圖片的，解決方法如下：

方法1：遍歷數(shù)據(jù)，使用前先手動 require

在前端，模塊的引入默認是不支持動態(tài)引入的（即不支持：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 在處理動態(tài)名稱模塊名的時候，會直接將能識別的靜態(tài)路徑和路徑下的所有子文件都作為模塊處理，如： require('../img'+imgName) ，能識別到 ../img 目錄，并將該目錄下所有文件當(dāng)做模塊處理，做成一個Map映射以便后面進行匹配，所以能識別到對應(yīng)的文件，其原理是 require.context ，屬性如下：

require.context(directory,useSubdirectories,regExp)

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

方法返回一個函數(shù)（假設(shè)為fn），傳入圖片路徑（不包含directory的路徑）可得到處理過的圖片對應(yīng)路徑（如：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：在數(shù)據(jù)庫端直接使用絕對路徑，并把所需圖片放到 public 目錄中

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

到此這篇關(guān)于徹底搞懂并解決vue-cli4中圖片顯示的問題實現(xiàn)的文章就介紹到這了,更多相關(guān)vue-cli4 圖片顯示 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論