webpack打包css成文件夹后中的背景图片地址失效,若修改则HTML的img标签图片地址又报错

webpack打包css成文件夹后中的背景图片地址失效,若修改则HTML的img标签图片地址又报错

今天我们来聊一聊webpack打包css到文件夹目录下背景图片的问题。
在这里插入图片描述
通过这样打包能打包到我们css文件夹目录下
在这里插入图片描述
然而这样也会出现一个css里背景图片位置失效的问题
在这里插入图片描述
很明显,这样的位置是找不到img,需要退一步目录
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200801102628931.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2t6ajA5MTY=,size_16,color_FFFFFF,t_70

重新打包后发现css背景图片地址正确了
在这里插入图片描述
但是,如果你的HTML标签里有img标签引入的图片地址也会修改
在这里插入图片描述
很明显,这里是不需要倒退一步目录的,这样问题就变得复杂起来了
怎么办呢?
我采用的方法是采用绝对路径
在这里插入图片描述
resolve前面要声明的哦
在这里插入图片描述
这样就解决了
在这里插入图片描述
在这里插入图片描述

哈哈~大家有什么不懂的可以留言
当然有更好的方法,各位大佬可以留言纠正我~

猜你喜欢

转载自blog.csdn.net/kzj0916/article/details/107726916