图片处理（file-loader）

引用时出现的问题

在js中引入图片并添加到页面

let img = new Image();
img.src = \'./logo.png\'
document.body.appendChild(img)

执行npm run dev

查看之后发现这个图片加载不出来，也就是说图片并没有被打包出来，此处的路径找不到图片

所以我们需要将图片以资源的形式引入进来

import logo from \'./logo\'	//此时logo为一个文件名
let img = new Image();
img.src = logo
document.body.appendChild(img)

注意：若使用require方式引入时引入的是一个对象，需要不同的处理方式（有兴趣的朋友可以自己打印出来看下）

let logo = require (\'./logo\')	//此时logo为一个文件名
let img = new Image();
img.src = logo.default	//此处有变动
document.body.appendChild(img)

此时执行npm run dev发现由于缺少一个loader报错

解决问题

此处我们需要的是一个file-loader

npm i file-loader -D

在web.config.js中匹配对应的规则

{
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                  {
                    loader: \'file-loader\',
                  },
                ],
              }

在此执行npm run devok 执行完成

版权声明：本文为axu1997原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/axu1997/p/12805799.html