webpack加载接口返回的图片地址(动态图片)

动态图片指的是接口返回的图片地址(指的是本地的图片地址，而非url地址)，本地建一个images文件夹，存放需要用到的图片，按照接口地址返回的图片地址去进行对比加载，webpack中加载可以使用file-loader或url-loader。

1、加载图片的配置

安装file-loader

npm install file-loader --save-dev

安装之后需要在配置文件中添加配置项：

  module: {
    rules: [
      {
        test: /\.(png|gif|svg|jpg)$/,
        use: ["file-loader"]
      }
    ]
  }
  ...

2、加载本地图片

webpack中一切的web资源视为模块(也包括了图片)，webpack支持commonjs，ES6的模块规范，可以使用require或者import()来加载图片。

• require输入的是被输出的值的拷贝，也就是说：一旦输出一个值，模块内部的变化就不会影响到该值，require()去加载模块文件，加载完了后才会接着去执行。

const  img = require('assets/images/xxx.png');

还有一个commonjs异步加载require.ensure已经被import()取代了，import()方法实现了用于动态加载的import()方法，这个功能可以实现按需加载代码，并且使用了promise式的回调，获取加载的包。

const module = await import('lodash');
//或
import('lodash').then((module) => {

})

使用require的话，如果在对应的images文件夹中找不到该image，就会给出相应的提示找不到资源。
获取动态图片可以使用require.context()配合keys()将images文件中已经存在的图片路径转成数组返回过来。

const img = require.context('assets/images',false);

console.log(img.keys()); 

import()异步加载找不到资源则不会将资源显示出来。