<强>前言:
本文演示了
-
<李> webpack如何在css文件中引入图片;李
<李> webpack如何在html中引入图片;李
需要安装配置的装载机:file-loader;
<强>为何要使用file-loader:
如果我们希望在页面引入图片(包括img的src和背景的url)。当我们基于webpack进行开发时,引入图片会遇到一些问题。
其中一个就是引用路径的问题。拿背景样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中url的路径是相对入口html页面的,而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件。
<>强安裝file-loader
package.json目前配置:
配置webpack.config.js
在常见下新增img文件夹,并添加图片dog.jpeg。
我目前用的项目目录:
示例一,在css中引入我们的图片
编写main.css
在我们的app.js中引入main.css
执行npm运行构建构建项目。
示例二,在html中引入图片:重新编辑我们的app.js
执行npm运行构建构建项目。
PS: webpack和图片引入的一些问题
问题描述
-
<李>需要使用& lt; img>标签引入多个图片
<李>理想方案是将图片的相关信息(图片文字,图片相对路径)整合到一个数组imageList李
<李>然后对imageList做一个地图渲染出图片列表
但是这样做导致了图片无法找到
发现请求图片路径出现了问题:所有图片请求的路径变成了当前的url拼接uri
换成进口形象”。/资产/1. jpg图像将给src就可以拿到图片
发现这是webpack引入图片的方式
<强>问题原因
Q1:这两种方式的区别?
A2:主要是资源路径的不同
-
<李>赋给src相对路径:导致资源请求的路径变成:当前+ src url的值
<李>赋给src进口的文件:首先使用进口可以返回一个字符串这个字符串是文件被打包之后(在静态目录下)的绝对路径。因此当前请求图片的路径就会变成:端口号+进口的值
李
最后请求图片的路径很好解释:
-
<李>如果src的值以削减开头那么会被认为是以静态文件为根目录的绝对路径李
<李>如果src的值不以削减开头那么会被认为是当前路径的相对路径李
总结为:静态服务器可以被当做文件系统看待,这就些uri是文件路径
Q2:图片是如何被webpack打包的?
A2:仅对于图片的进口:
打包时机:在项目中的图片并不是都会被打包的,经过尝试发现通过进口或者背景:url(图片路径)引入的图片才会被打包
