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

最新推荐文章于 2021-10-07 19:12:14 发布
最新推荐文章于 2021-10-07 19:12:14 发布
阅读量633 收藏 1
点赞数 3
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kzj0916/article/details/107726916
版权

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前面要声明的哦
在这里插入图片描述
这样就解决了
在这里插入图片描述
在这里插入图片描述

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

Might°
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webapck打包css背景图
mu0nian的博客
06-14 173
今天你听歌了吗？今日推荐 诛心 开始进入正题 我相信你的测试代码是这样写的 .js const el = document.createElement("div");el.className = "bg-img";document.body.appendChild(el) .css .bg-img {    width: 200px;    height:&n
webpack中把css文件打包成独立文件，背景图片不显示的问题
Coralpapy的博客
08-05 493
webpack.config.js const { resolve } = require('path') const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')//压缩css const MiniCssExtractPlugin = require("mini-css-extract-plugin");//打包css成独立文件 const HtmlWebpackPlugin = require('html-webpack-.
完美解决webpack打包css背景图片路径问题
11-20
在vue组件的style标签内部有如下一段使用背景图片的css代码 background-image: url("../assets/img/icon_add.png"); 在webpack中css-loader的解析配置如下 { test: /\.(css|less)$/, exclude: path.resolve(__dirname, 'node_modules'), use: ['style-loader', 'css-loader', 'less-loader'] } 打包后在dist目录的发现没有css文件。这是因为css
webpack6--css 背景图片处理
weixin_33753003的博客
10-31 179
当css里面含有背景图片，用webpack打包时会报如下错：   如何处理这个问题呢？ 我们需要借助于 file-loader 和  url-loader 这2个包。   下面具体说一下步骤： 1.安装 file-loader 和 url-loader cnpm install --save-dev url-loader file-loader url-loader：引入的图片编码，生成da...
css图片的显示不出来,wepback打包时，css的背景图片显示不出来，求教！
weixin_42565971的博客
08-04 148
如题。项目环境使用 webpack 构建的，webpack 这块配置的相关代码是module: {loaders: [{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel' },{ test: /\.less$/, exclude: /node_modules/, loader: 'style!css!postcss!less...
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
01-19
使用vue打包，通过css引用图片资源。...查了一下原因，css引入图片再打包后，style-loader无法设置自己的publicPath，于是我改变了ExtractTextPlugin的css路径publicPath。 if (options.extract) { retur
纯html+javascript+css webpack打包的项目
最新发布
04-12
**纯HTML+JavaScript+CSS Webpack打包项目** 在现代Web开发中，为了提高开发效率和优化网站性能，开发者经常使用Webpack这一强大的模块打包工具。本项目以HTML、JavaScript和CSS为基础，结合Webpack进行资源的管理...
webpack配置打包后图片路径出错的解决
08-27
Webpack配置打包后图片路径出错的解决 在使用Webpack进行项目打包时，常见的一个问题是图片路径出错的问题。这个问题的出现是因为Webpack在打包时会对图片进行处理，导致图片的路径出错。本文将介绍两种解决该问题...
浅谈webpack打包过程中因为图片的路径导致的问题
08-28
例如，在CSS中使用相对路径来充当背景图片，但是在浏览器上运行时却报错，无法找到图片文件。 2. 问题分析 问题的根源在于webpack的打包过程中，图片文件的路径没有被正确地处理。在默认情况下，webpack会将使用到...
vue-cli || webpack 打包的时候css里面写的背景图片的路径出错问题
weixin_30906185的博客
12-27 220
.bg width 100% position fixed left 0 top 0 height 100vh z-index -1 background url('~@/assets/imgs/bg9.jpg') center no-repeat // 这个背景图片 background-size cover ...
html img路径 404,webpack css背景图片无法现实，图片路径404
weixin_34303763的博客
06-17 607
项目引入sass，然后，尼玛，图片死活不显示……然后看下，尼玛，路径404，什么鬼？然后，编辑中级编辑css，是好的啊……这么到webpack里面，就不认图片路径了呢？//require('normalize.css/normalize.css');require('styles/App.scss');importReactfrom'react';//importHeaderfrom...
webpack (三) -打包图片-配置加载器file-loader-把图片作为背景图使用 & 打包字体-在less文件引入字体格式，流程同打包图片
weixin_44867717的博客
02-21 947
08-webpack-打包图片 第一步：在src/assets下，创建图片文件夹images,新建src/assets/images/logo.png文件 第二步：webpack.config.js中配置文件，因为webpack默认打包js文件，如果引入其他格式图片文件，需要用对应的加载器插件处理该文件，把代码解析成js文件，才可以加载图片等格式文件 https://www.webpackjs.c...
webpack打包css中背景图路径报错问题
xuxu_qkz的博客
02-27 5207
webpack打包css中背景图路径报错问题 问题描述：明明打包成功，但是部署到后台时，却发现背景图丢失了 这是背景图的路径 这是链接地址路径 这是webpack打包后的图片存储路径 通过查找原因，我们可以在浏览器运行的HTML代码中发现，背景图的路径不正确，因此我们需要在webpack重新设置你的css-loader路径，只需要添加publicPath 公共路径即可。 limit，代
webpack打包项目教程(还是遇到了打包后背景图片不显示的深坑以及html中的img不显示的问题，爬了一天多才豁然开朗)
李小乐er
01-19 1万+
首先，在确认已经安装好nodejs、npm、webpack后新建一个文件夹，这里我建的文件夹名为logined。不知道webpack怎么安装的可以看我写的上一篇，webpack安装配置以及填坑操作。mkdir logined用编辑器打开该文件夹所在路径，然后创建一个js文件夹 在js文件夹下建一个index.js文件然后敲命令webpack index.js bundle.js这样通过打包就在bu
vue项目打包后css背景图片无法显示问题
Arlisol的博客
02-24 3233
博主在测试打包项目时发现自己使用的404页面的背景图片无法显示，经过之前的问题，基本推断又是路径问题。在搜索引擎一番查找后发现果然是路径的问题，因为打包后的css文件在static文件夹下的css文件夹中，static文件夹和index.html是同级关系，这样引用时的路径就不对了，下面上解决办法： 在build/utils.js文件中相应位置修改如下： // Extract CSS when t...
webpack5.0中打包css背景图片生成重复，不能显示的问题考究
Coralpapy的博客
08-05 1565
问题：利用webpack5.0以上版本进行背景图片打包，会出现打包图片重复的问题，并且在背景图片无法正常显示. 测试过的正常配置如下： webpack.config.js const { resolve } = require('path') module.exports = { mode: 'development', entry: './src/index.js', output: { path: resolve(__dirname, 'dist'),
webpack5打包图片背景图片文件出现的问题
wms_swag的博客
10-07 1047
在webpack5中file-loder和url-loader已经被弃用，如果想要继续使用url-loader和file-loader时，可以通过将模块类型设置为’javascript/auto’. 第二个问题：url-loader默认采用ES模块语法，即import './'的形式，如果想使用commonjs规范的话 则需要在option中配置esModule：false { test: /\.(png|jpg|gif|jpeg)$/i, ..
img图片如何用css更换路径,Webpack 打包怎么修改 css img 路径？
weixin_35509069的博客
08-04 719
现在的目录结构如下|--src---img-a.png|-scss-b.scss|-index.html在 b.scss 中#b {backgroun-image: url( ../img/a.png )}在 index.html 中配置 webpackmodule.exports = {mode: 'production',entry: './src/index.js',output: {pat...
vue打包之后静态资源图片失效问题
热门推荐
纸上得来终觉浅，绝知此事要躬行
04-13 4万+
1.问题描述 在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到（404错误），这些图片可以是以src引入的图片， 也可以是css中定义的背景图片。图片能否显示与你的静态资源文件存在位置和引入 的路径直接相关，下面是我的其中一个项目的文件存放以及路径书写方式！ 2.解决方法之一 静态资源static存放位...
webpack 打包css背景图片路径处理
05-16
Webpack 是一款非常流行的前端打包工具，它可以将 JavaScript、CSS、图片等多种资源文件进行打包，并通过一系列的插件和配置来进行定制化。当我们在开发过程中使用 CSS 来设置背景图片时，可能会遇到一些问题，比如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值