webpack 加载动态图片

t现在是冬天t

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) =>{

  })

两种方法发现的问题

  • require
    返回的文件不在上述 image 文件夹时候就回报模块找不到的错误。
  • import()方法
    异步加载,实测图片没显示(如有大神解决了,请告知)

解决办法

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

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

  • 原文地址 dynamic-import-image
  • 另外我的博客地址 blog会经常分享 最近的学习内容,项目中遇到的问题及解决方案
阅读 3.9k

前端学习
记录自己的前端学习历程
819 声望
46 粉丝
0 条评论
819 声望
46 粉丝
文章目录
宣传栏