在webpack中引入图片的实现及问题

前言：

本文展示了

webpack如何将图片引入css文件；webpack如何将图片引入html需要安装已配置的加载程序：文件加载程序；

为什么使用文件加载器：

如果我们想在页面中引入图片(包括img的src和背景的url)。当我们基于webpack开发时，在介绍图片时会遇到一些问题。

其中之一就是参考路径的问题。以背景样式为例，我们都知道webpack最终会将每个模块打包成一个文件，所以我们样式中的url路径是相对于入口html页面的，而不是相对于原始css文件所在的路径。这将导致图像导入失败。这个问题通过file-loader来解决，它可以解析项目中的url介绍(不限于css)，根据我们的配置将图片复制到对应的路径，然后根据我们的配置修改打包的文件引用路径，指向正确的文件。

安装文件加载器

$ npm i -D文件-loaderpackage.json当前配置：

配置webpack.config.js

在“常用”下添加img文件夹，并添加图片dog.jpeg。

我目前使用的项目目录：

示例1:将我们的图片引入css

编写main.css

在我们的app.js中引入main.css

执行npm运行构建构建项目。

示例2:将图片引入html:重新编辑我们的app.js

执行npm运行构建构建项目。

PS:webpack引入的一些问题及图片

问题描述

使用img标签引入多张图片的理想方案是将图片的相关信息(图片文字、图片相对路径)集成到一个数组imageList中，然后在imageList上进行地图渲染，生成图片列表Const ImageList=[{ID:1，INFO : '中国银行'。uri :’。/assets/1.jpg'}，{id:2，info: '中国农业银行'，uri3360 '。/assets/2.jpg'}，{id33603，info: '中国建设银行'，Uri: '。/assets/3 . jpg ' }]imagelist . map((img)={ return(div { img . info } img src={ img . uri }//div)})，但这导致图片被找到。

发现请求的图片路径有问题：所有图片请求的路径都变成了当前的url拼接uri

更改为从“”导入图像。/assets/1.jpg '并将图像交给src以获取图片

发现这是webpack介绍图片的方式

问题原因

Q1:这两种方法有什么区别？

A2:主要是资源路径的不同

分配给src的相对路径：导致资源请求的路径变为：当前url src的值分配给src导入的文件：首先，导入可以返回一个字符串，这是文件打包后的绝对路径(在静态目录下)。因此，当前请求图片的路径将变成：端口号导入的值，最后请求图片的路径很容易解释：

如果src的值以斜杠开头，它将被认为是以静态文件为根目录的绝对路径。如果src的值不以斜杠开头，它将被视为当前路径的相对路径。总而言之，静态服务器可以被视为文件系统，而这些URIs就是文件路径。

webpack如何包装Q2:图片？

A2:导入：仅用于图片

打包机会：并不是项目中的所有图片都会打包，而是在尝试发现通过import或background:url(图像路径)导入的图片后才会打包

打包位置：通过设置文件加载器

{test: /\。(jpg|png|svg|pdf)$/，exclude: /font。*\.svg$/，loader: '文件加载器？名称=[路径][名称]。[哈希]。[ext]' }//根据这个设置，webpack会将* *使用的所有图片加载到当前路径中，路径名称相同，但带有后缀。哈希。**Q3: img src。价值是什么？背景：URL的价值可以是什么？

A3:

img src:

路径(url)需要(或导入的值)数据URL (base64)背景：URL:

Path(相对)数据url(base64)Q4:为什么可以在css中使用background-url()来使用图片的相对路径，而不能在js文件中使用相对路径来分配给src？

A4:首先解释了我发现的差异

Src:它将发送对静态外部文件资源的请求(只要是src，它将发送请求，而不管其值如何(base64除外))。css背景：它不会发送请求。webpack以完全不同的方式对待它们：

-src:url:将不由webpack处理-src:require():将由webpack处理-背景：url:将由webpack处理。摘要：使用import或require或background将由webpack的文件加载器作为依赖模块进行处理：

-打包时，执行导入。)-将相应的静态文件打包到配置的位置-生成打包的绝对路径，并将其分配给导入部件Q5:导入客户端图片有多少种方式？他们的不同原则是什么？

A5:所谓客户端图片：是你不想通过http请求得到的图片

其他知识通过background:url('。/****)，background:url(图片base64)，src=图片base64，src=require('。/******')

今天K1:终于明白文件加载器的功能了

当其他模块需要引用文件时，文件加载器根据name属性所需的文件路径和文件名打包相应的文件。通过计算文件大小，如果小于限制值，文件将被转换为base64并分配到需要这些文件的位置，如果大于限制值，文件的打包路径将被分配到需要这些文件的位置

我的问题是：

网上说是src值的开始，这部分请求可以当做依赖模块来对待，但是我没有尝试成功

我的解决方案

由于还不知道如何在后台-url编程循环中引入图片，所以决定采用：于是写了一个对象数组并映射，返回img src={require (bank。img ' ')} const Bank _ list=[{ name : '中国银行'，Img: '。/assets/bank-logo-6.png '，id33601}，{name: '中国建设银行'，img: '。/assets/bank-logo-7.png '，id: 2}，{name:' Img: '。/assets/bank-logo-8.png '，id 3360 3 }]bank _ list . map((bank)={ return(img src={ require(bank。img'')}/)})我的另一个解决方案(由于项目中的eslint要求，

使用require。上下文(' pathdirectory ')有了webpack，他可以循环引入一个目录中的所有文件

Const bank _ list={ '。/Bank-logo-6 . png ' : {名称： '中国银行'，ID : 1}，'。/Bank-logo-7 . png ' 3360 { name : '中国建设银行'，id: 2}。/bank-logo-8 . png ' : { name : ' industrial bank '，id : 3 } } const path to images=require . context('。/assets ')；const original bank list=pathtoimages . keys()。map((key)={ return object . assign({ }，BANK_LIST[key]，{ URL : path to images(key)})})；//此时，originalBankList中的每一项都将变成{name: '中国银行'，id: 1。URL : '/app/src/containers/wise port/check outcountai…/bank-logo-1.9f 949 c 516315756 e 18 c 0 CB 7d 572 F4 d2c . png ' ' }以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。