webpack 加载动态图片

webpack 加载动态图片

所谓动态图片指的是接口返回的图片地址，这里的地址指的是本地的图片地址，而非网络图片的url。本地有一个 image 文件夹，存放需要用到的图片。按照接口返回的图片地址比对去加载。webpack加载图片首先想到的是 file-loader 或者 url-loader  

 

加载图片的配置

首先安装file-loader  

npm install file-loader --save-dev

增加webpack配置,详细文档请参考 file-loader

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

 

webpack 加载本地图片

webpack将一切web资源视为模块，其中就包含图片，
webpack支持commonjs，ES6的模块规范，于是我们可以使用require,以及基于ES6规范的 import() 来加载图片
这两种方式有啥区别呢

require 
输入的是被输出的值的拷贝。也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。这点与 ES6 import
模块化有重大差异 跟 sea.js 的执行结果一致，也是在 require 的时候才去加载模块文件，加载完再接着执行。

我们可以这样使用

const lodash = require('lodash')

还有一个 commonjs异步加载 require.ensure 已经被下文的 import()方法 取代了。

import()方法 
ES2015 loader 规范实现了用于动态加载的import()方法，
这个功能可以实现按需加载我们的代码，并且使用了promise式的回调，获取加载的包。

从上我们可以看出 import是异步加载，我们可以这样使用

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

  })

广州设计公司https://www.houdianzi.com 我的007办公资源网站https://www.wode007.com

两种方法发现的问题

require 
返回的文件不在上述 image 文件夹时候就回报模块找不到的错误。import()方法 
异步加载，实测图片没显示

解决办法

  const file = require.context('../../image', false);
  const keys = file.keys()

keys会返回 image 里面已存在的图片路径的数组，我们只要判断接口返回的图片地址在本地图片里面再去加载
从而避免模块找不到的问题。