vue 前端ES6 require動態引入圖片報錯Error: Cannot find module

在Vue中，Image組件的source如果使用require方式引入圖片資源，則必須使用靜態的字符串，不能使用變量，因爲require是編譯時執行的，而非運行時執行！

於是Vue爲Image組件的source提供了另外一種使用變量的方式source={{ uri: item.picture }}，也支持如下寫法：

let source = '';
  switch (item.resultType) {
    case 0:
      source = require('../../assets/app/ic_dsh.png')
      break;
    case 1:
      source = require('../../assets/app/ic_sptg.png')
      break;
    case 2:
      source = require('../../assets/app/ic_bohui.png')
      break;
    case 3:
      source = require('../../assets/app/ic_zuofei.png')
      break;
  }

 <Image
          style={{
            position: 'absolute',
            zIndex: 10,
            top: OASize(0),
            right: OASize(5),
            width: OASize(44),
            height: OASize(16),
          }}
          // resizeMode="contain"
          source={source}
        />

下面來說說ES6的require

關於es6的require添加動態變化的路徑

直接靜態寫死是不會有錯誤的：

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

但是如果你嘗試着：

var imgUrl = "../images/b.jpg";
 
let img = require(imgUrl);

或者這樣動態變化：

require(`../../assets/images/${showAllExpended?'unfold':'up'}.png`

那就只能涼涼的報錯咯（因爲require它是打包工具所需要的標識，你搞成運行時通過變量去定義的話，它就沒辦法打包了啊）：

PS：由於我瀏覽器緩存我復現不了情況，就取一張別人的報錯圖片來解釋一下吧：

 

 解決方法：

 

而require裏的正確的格式必須是path

可以這麼寫：

var imgUrl = "a";
 
let img = require('../images/'+imgUrl+'.jpg');

當然最好這麼寫：imgUrl 爲圖片名稱即可，相對路徑與絕對路徑不能加。

var imgUrl = "b.jpeg";
 
let img = require('../images/'+imgUrl);