解决webpack打包样式url()背景图片问题

最新推荐文章于 2021-12-01 22:02:41 发布
最新推荐文章于 2021-12-01 22:02:41 发布
阅读量2k 收藏
点赞数 1
分类专栏： javascript 文章标签： webpack css sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kkndyyrolf/article/details/111473933
版权
在webpack4项目中，使用url方法指定的背景图片打包后无法正常显示。问题源于webpack配置不当，错误信息指向图片未找到。通过深入排查，发现是由于webpack默认处理url()函数导致的问题。解决方案是将webpack的url配置设为false，阻止css-loader解析url(…), 从而保留原始路径，确保css中相对路径的图片能正确引用。这一方法适用于css的url()图片通常使用相对路径且图片存放在特定服务器的情况。" 133260987,20014476,Open3D实现点云高程归一化,"['点云处理', 'Open3D库', '三维视觉']
摘要由CSDN通过智能技术生成

定位错误

项目使用webpack4进行编译，打包后的样式中使用url方法指定的背景图片不能够正常显示

源码戳这里

.bgurl{
   
  background-image: url('/images/abc.jpeg')
}

上述样式在webpack中编译出错，配置如下

// stylus
[
  loader: MiniCssExtractPlugin.loader,
  {
   
    loader: 'css-loader',
    options: {
   
      importLoaders: 2,
    }
  },
  'postcss-loader',
  'stylus-loader'
最低0.47元/天 解锁文章
kkndyyrolf
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
完美解决webpack打包css背景图片路径问题
11-20
本文将详细解析如何解决Webpack打包CSS背景图片路径问题。 首先，让我们分析问题所在。在Vue组件的样式部分，我们可能会写入如下的CSS代码： ```css background-image: url("../assets/img/icon_add.png"); ``` 在...
解决webpack打包css背景图片路径问题
QQQ777jokero的博客
12-09 430
解决webpack打包css背景图片路径问题 webpack.config.js文件 const path = require('path') const htmlWebpackPlugin = require('html-webpack-plugin') // 导入每次删除文件夹的插件 const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 导入抽取css的插件 const MiniCssExtractPlugi
Webpack CSS/SCSS中url()无法正常解析解决方案
https://github.com/blingbling-110
08-11 1479
仅供参考 软件包版本： { "css-loader": "^6.2.0", "css-minimizer-webpack-plugin": "^3.0.1", "mini-css-extract-plugin": "^1.6.0", "sass": "^1.35.1", "sass-loader": "^12.1.0", "url-loader": "^4.1.1", "webpack": "^5.39.1", "webpack-cli": "
vue+webpack 模块编译后背景图片不显示
iloki的博客
09-01 616
问题描述 在vue项目中，给一个按钮加上背景图片，路径是正确的，但是编译后（npm run build）却不显示，但是如果给按钮加上图标，编译后就可以正常显示。 问题分析 经过排查发现，问题是因为编译前后，图片路径不一致导致的。 编译后会生成一个dist文件，图片在dist下的某个文件夹下。但是代码里写的图片路径还是原来的，所以页面上显示失败。 图标可以正常显示是因为图标经过了base64转换，正常的图片就不会这么转换。 解决方案 网上找了很多办法，加什么require(‘imgUrl’),或者是改pub
小程序-url引入背景图片写在样式处会报错，写在行内不包错
qq_36413371的博客
10-09 704
1内容
webpack在打包图片后出现的问题：background-image显示为“url([object Module])”，图片无法显示
你是我修复不了的bug，但我会用一生去维护
12-01 1661
webpack在打包图片后出现的问题：background-image显示为“url([object Module])”，图片无法显示 原因： 因为url-loader默认使用es6模块化解析，解析时会出现[object Module]。但是webpack5之后就没有这个问题了，可能默认已经配置。 解决方案： 关闭url-loader的es6Module，让他以commonjs的方式解析 在配置中添加：“esModule: false” { // 问题：默认处理不了html中
透过现象看webpack处理css文件中图片路径转换的具体过程
Addisoni
02-06 1096
webpack是目前使用比较流行的一个前端模块打包器，前端的任何资源都被当成一个模块来处理，如图片、css文件等等。在基于webpack构建的前端项目中，一般都会配置有关css文件处理的规则，这其中也包括css文件中图片资源的处理，那么webpack到底是怎么处理它的呢？笔者之前也遇到过类似图片路劲的问题，为此还写过一篇博文webpack生成的css文件background-image url图片...
webpack配置打包后图片路径出错的解决
08-27
在Webpack配置打包后图片路径出错的问题可以通过修改url-loader的配置或使用vueLoaderConfig里的cssLoaders方法来解决。这些方法可以帮助你解决图片路径出错的问题，提高项目的加载速度和用户体验。
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
Webpack是一个模块打包工具，它能够将JavaScript、CSS、图片等资源文件转换并整合到一起，生成适合部署到生产环境的静态资源。然而，在实际的项目开发过程中，可能会遇到一些问题，比如在本例中提到的`iconfont`图标...
解决在vue项目中webpack打包后字体不生效的问题
10-18
在Vue项目中，WebPack是常用的模块打包工具，它能够将我们...在开发过程中，及时检查控制台的元素样式和网络请求，可以帮助快速定位和解决问题。同时，持续关注Webpack和浏览器的最新动态，以获取最佳实践和解决方案。
webpack之引入图片的实现及问题
12-09
拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。
前端笔记-webpack加载前端资源（图片，css等）
IT1995的博客
08-05 4347
目录 基本概念 代码与实例 基本概念 通过在webpack.config.js这个文件中添加module rules进行如下代码： 这里分别是加载vue，以及css，和styl样式和图片 styl用于css预处理，模块化编写css 这里还要说下图片，这里的options为其他的选项，比如： test: /\.(gif|jpg|jpeg|png|svg)$/, ...
webpack学习笔记-2-file-loader 和 url-loader
热门推荐
qq_38652603的博客
06-28 3万+
简单介绍了webpack对引入图片的处理；loader的参数；url-loader和file-loader
scss中webpack不打包@import url()引入的scss解决方案
yanhappiness
10-19 7620
解决方案 1.先讲解决方案 将 @import url("./**.scss") ; 改为 @import "./**.css"; 原因 共同点： 首先这两种引用方式都是从其他样式表导入样式规则到当前样式表中。 不同点： @import url 是css的语法规则 @import [ < string > | < url > ] [ < media...
webpack处理url资源的配置
weixin_30344795的博客
11-11 181
webpack处理url资源的配置 1.安装 npm i url-loader -D 2.修改webpack.config.js const path = require('path'); // 启用热更新的 第2步 const webpack = require('webpack') //导入html插件 //只要是插件,都一定要放到plugins节点中去 const htmlWebpackPl...
webpack通过url-loader获取资源文件路径
金大光
03-10 5352
当webpack的项目需要引入一个资源文件时，比如一个swf文件，可以通过url-loader获取打包后资源的路径
webpack处理url地址
shangsiqi1的博客
11-08 660
首先安装第三方模块 npm install url-loader file-loader -D 配置文件中配置 module.exports={ module:{ rules:[ {test:/\.(jpg|png|gif|bmp|jpeg|ttf|eot|svg|woff|woff2)$/,use:'url-loader?limit=图片字节值&name=[hash:8]-...
如何解决webpack中css背景图片的绝对地址
weixin_30338481的博客
01-21 329
在项目开发中，一般写相对路径是没有问题的，但是在项目比较大的情况下，我的scss文件可能为了方便管理，会放在不同的文件夹下，有的可能又不需要放在文件夹下,比如我的scss文件结构如下： module common.scss test.scss about about.scss login.scss index.scss 比如目录是这样的，common.s...
webpack 图片打包路径问题DIY解决方案
yanhappiness
10-19 1582
为什么要DIY？因为我也不知道官方怎么解决的啊！ 如果你能告诉我的话，真的是帮大忙了！ 问题描述 开发环境上的图片地址是放在根目录下面的，不用管，但是生产环境的地址引用一直不对！图片路径报错… 先来看配置文件 生成目录 这种形式：打包路径是对的，但是引用路径是根据publicPath来决定的。 生成的图片路径所有的都是 ./images/[hash].[name].[ext] 问...
webpack 常见问题
最新发布
05-18
以下是一些常见的Webpack问题和解决方案： 1. 如何安装Webpack？ 可以使用npm命令安装Webpack：`npm install webpack --save-dev` 2. 如何配置Webpack？ Webpack的配置文件名为webpack.config.js，位于项目根...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值