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

  })

兩種方法發現的問題

• require
  返回的文件不在上述 image 文件夾時候就回報模塊找不到的錯誤。
• import()方法
  異步加載，實測圖片沒顯示(若有大神解決了，請告知)

解決辦法

require.context

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

keys會返回 image 裏面已存在的圖片路徑的數組，咱們只要判斷接口返回的圖片地址在本地圖片裏面再去加載
從而避免模塊找不到的問題。

• 原文地址 dynamic-import-image
• 另外個人博客地址 blog會常常分享 最近的學習內容，項目中遇到的問題及解決方案