快捷導(dǎo)航

徹底搞懂并解決vue-cli4中圖片顯示的問題實(shí)現(xiàn)

更新時(shí)間：2020年08月31日 08:32:34 作者：老謝

這篇文章主要介紹了徹底搞懂并解決vue-cli4中圖片顯示的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

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

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

1、手動(dòng)引入

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

2、相對(duì)路徑

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

在 vue-cli 中使用相對(duì)路徑時(shí)，webpack會(huì)自動(dòng)介入，上面的代碼在編譯時(shí)自動(dòng)變成

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

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

3、絕對(duì)路徑

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

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

最終顯示效果

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請(qǐng)求數(shù)據(jù)回來，然后遍歷寫入到頁面結(jié)構(gòu)中），這個(gè)時(shí)候綁定到 src 屬性的是一個(gè)變量，無法直接手動(dòng) import 或 require ，如果直接使用 imgurl 屬性中的路徑， webpack不會(huì)介入處理 ，所以以上代碼是無法正常顯示圖片的，解決方法如下：

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

在前端，模塊的引入默認(rèn)是不支持動(dòng)態(tài)引入的（即不支持：require(變量)），如下

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

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

有小伙伴可能會(huì)覺得奇怪，為什么這樣做就可以了，Webpack 在處理動(dòng)態(tài)名稱模塊名的時(shí)候，會(huì)直接將能識(shí)別的靜態(tài)路徑和路徑下的所有子文件都作為模塊處理，如： require('../img'+imgName) ，能識(shí)別到 ../img 目錄，并將該目錄下所有文件當(dāng)做模塊處理，做成一個(gè)Map映射以便后面進(jìn)行匹配，所以能識(shí)別到對(duì)應(yīng)的文件，其原理是 require.context ，屬性如下：

require.context(directory,useSubdirectories,regExp)

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

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

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

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

您可能感興趣的文章: