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