【webpack5图片的引入出现的问题和使用方法】

项目场景：

1、给一个div设置背景图；

background: url("/src/image/4.png") no-repeat;
background-size:  100vw 100vh;

2、html的img标签设置图片；

<img id="zi" class="zi" src="/src/image/w.png">

3、动态修改img的src属性

---

问题描述

1、背景图也找不到，2、img图片找不到，3、动态修改图片img的src时找不到图片。

---

原因分析：

1、图片未被打包
当使用的图片url是动态拼接的，可能会出现webpack没有检测到该图片被引用的问题，所以打包后图片因为不存在而找不到。

2、图片路径错误
当一个图片被多次引用，当使用的是动态拼接为打包前图片存放的路径会找不到图片，因为打包时会把动态生成的路径直接存下来，不会将其二次转译为打包后相对路径。

3、引入webpack需要下载处理图片的依赖

---

解决方案：

在webpack。config.js中进行配置
1、背景图的配置
npm i -D url-loader file-loader

// 背景图片处理规则
      {
        test: /\.(jpg|png|gif|bmp|jpeg)$/,
        use: {
          loader: "url-loader",
          options: {
            name: 'image/[name][hash:9].[ext]', // 对打包之后的图片名称进行加密
            esModule: false,
            limit: 8 * 1024, // 将小于8kb的图片用based64处理
          }
        },
        type: 'javascript/auto' //转换 json 为 js
      },

2、html页面中img标签的配置
npm i -D html-withimg-loader

{
  test: /\.(htm|html)$/,
  loader: 'html-withimg-loader'
}

3、动态修改img的src时，图片找不到的问题
需要使用 require() 去引入图片地址，不然真不能用。

class colorEgg {
  keyList: Array<string> = [require("./image/c.png"), require("./image/d.png"), require("./image/e.png"), require("./image/f.png"), require("./image/i.png"), require("./image/n.png"), require("./image/o.png"), require("./image/p.png"), require("./image/t.png"), require("./image/w.png")];
  key: string;
  constructor(key: string = "./image/c.png") {
    this.key = key;
  }

  changeKey(index: number) {
    this.key = this.keyList[index];
    const zi = document.getElementById("zi")!;
    zi.setAttribute("src", this.key);
  }
}

const colorText = new colorEgg();
// 随机取值0-9,一共十张图片
let index: number = Math.floor(Math.random() * 10);
colorText.changeKey(index)

还必须是在定义 keyList 数组的时候使用require().
如果写成：

keyList: Array<string> = ["./image/c.png","./image/d.png", "./image/e.png"];
zi.setAttribute("src", require(this.key));

这样是错误的，还是会报错。