• 相信不少同學(xué)在開發(fā)中都有遇到圖片路徑需要使用變量引入的情況，
• 如定制化背景，動態(tài)展示頭像等?？赡芤卜高^如

一、錯誤描述

頁面直接調(diào)用圖片資源的方案

<img src="../../static/images/web_bg.png" />

改寫成變量形式，于是如下編寫

<template>
 <img :src="imgSrc" />
</template>
 
<script>
export default {
 data() {
  return {
   imgSrc: '../../images/web_bg.png'
  }
 }
}
</script>

二、運行圖片加載失敗原因

Vue中動態(tài)引入圖片要require的原因是什么？

2.1、什么是靜態(tài)資源和動態(tài)資源

站在一個vue項目的角度，我們可以簡單的理解為：
靜態(tài)資源就是直接存放在項目中的資源，這些資源不需要我們發(fā)送專門的請求進行獲取。比如assets目錄下面的圖片，視頻，音頻，字體文件，css樣式表等。

2.2、 為什么動態(tài)添加的src會被當(dāng)做的靜態(tài)的資源？

因為動態(tài)添加src沒有進行編譯，被webpack當(dāng)做靜態(tài)資源處理了，而被編譯過后的靜態(tài)路徑無法正確的引入資源

三、解決辦法

3.1、 使用網(wǎng)絡(luò)上的圖片資源

data() {
 return {
  imgSrc: 'http://easy-stage.longhu.net/files/images/7f458e55f6954078aa8e8efb2c45cc40.jpg'
 }
}

3.2、使用import導(dǎo)入本地資源

import imgSrc from '../../images/web_bg.png'
export default {
 data() {
  return {
   imgSrc: imgSrc
  }
 }
}

3.3、 使用 require 導(dǎo)入

data() {
 return {
  imgSrc: require('../../images/web_bg.png')
 }
}

四、動態(tài)引入圖片require()詳解

• webpack本身是一個預(yù)編譯路徑 不能require純變量的打包工具，無法預(yù)測未知變量路徑
• require(path) ,path 至少要有三部分組成, 目錄,文件名和后綴
• 目錄：webpack 才知道從哪里開始查找
• 后綴 文件后綴，必須要加上，不然會報錯
• 文件名：可用變量表示

4.1、錯誤引用

上述意思即是不能通過以下這種方式加載圖片，這種方式下，webpack找不到具體是哪個模塊（圖片）被引入，故而無法將圖片hash并輸出到dist文件下。

let imgUrlStr = '../images/a.png'; 
let imgUrl = require(imgUrlStr);

4.2、正確引用

鑒于require在純變量的情況下找不到模塊，所以我們至少要在require參數(shù)中寫明一個目錄，這樣的話，雖然不知道具體的模塊，但是webpack也會為我們做些分析工作：

分析目錄： '../images'
提取正則表達式 : '/^.*.png$/'

let imgName = 'a'; 
let imgAllName = 'a.png';

// example 1
let imgUrl = require('../images/a.png');                // 純字符串
// example 2
let imgUrl = require('../images/' + imgAllName);        // 目錄 + 文件全名
// example 3
let imgUrl = require('../images/' + imgName + '.png');  // 目錄 + 文件名 + 后綴

4.3、常用場景

<template>
  <div>
    <div v-for="(item, index) in imgNameList" :key="index">
      <img :src="handleSrc(item.name)" alt="item.name" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgNameList: [
        { name: "imgName1" },
        { name: "imgName2" },
        { name: "imgName3" },
        { name: "imgName4" },
      ],
    };
  },
  methods: {
    handleSrc(imgName) {
      return require("@/assets/img/" + imgName + ".png");
    },
  },
};
</script>

五、動態(tài)引入圖片import()詳解

require是運行時加載模塊，但import命令會被javascript引擎靜態(tài)分析，先于模塊內(nèi)其他模塊執(zhí)行，做不到運行時加載，因此為了實現(xiàn)類似于require的動態(tài)加載，就提出了實現(xiàn)一個import()函數(shù)方法

import(specifier);

上面代碼中，import函數(shù)的參數(shù)specifier，指定所要加載的模塊的位置。import命令能夠接受什么參數(shù)，import()函數(shù)就能接受什么參數(shù)，兩者區(qū)別主要是后者為動態(tài)加載。

import()函數(shù)可以用在任何地方，不僅僅是模塊，非模塊的腳本也可以使用。它是運行時執(zhí)行，也就是說，什么時候運行到這一句，也會加載指定的模塊。另外，import()函數(shù)與所加載的模塊沒有靜態(tài)連接關(guān)系，這點也是與import語句不相同。

import() 特性依賴于內(nèi)置的 Promise。如果想在低版本瀏覽器使用 import()，
記得使用像 es6-promise 或者 promise-polyfill 這樣 polyfill 庫，來預(yù)先填充(shim) Promise 環(huán)境。

// example
let imgUrl = '';

// 與require參數(shù)類似，不能通過純參數(shù)的方式引入模塊。正確的引入方式可查看以上require的引入方式
import('../assets/tree/tree.png').then(res => {
    imgUrl = res;
});