webpack打包时，css里的图片路径不能正确打包问题

最新推荐文章于 2022-11-18 18:16:45 发布
原创 最新推荐文章于 2022-11-18 18:16:45 发布 · 800 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue #webpack背景图不显示 #npm run build 无背景图
本文解决了使用mini-css-extract-plugin打包时，登录页面背景图片路径出现错误的问题。通过修改loader配置，确保了图片资源的正确引用。

const query = _loaderUtils2.default.getOptions(this) || {publicPath: ‘…/…/’};

node_modules\mini-css-extract-plugin\dist\loader.js第69行，替换成上面这个

解决打包时login页背景图路径错误问题

Lewis

完美解决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
webpack5中getOptions没了？
Aucanon的博客
11-18 649
但是好像没有替换的方法，后来注意到方法 interpolateName 的参数中有一个。但是现在使用这个方法进行打包的时候就会报没有getOptions方法的错误。虽然不知道是不是正解，但是目前就是好像可以拿到配置的options了。在做一个webpack的demo的时候创建一个自定义的。,对loader进行配置的时候设置了。，看的教程以及别的教程的博客都是用的。方法来获取options的配置项。的参数然后就直接拿来试了一下。在官方文档中方法好像只剩下了。
当css文件中有图片时如何用webpack打包引用
weixin_55803498的博客
05-15 458
**步骤一：**安装url-loader并在webpack.config.js文件中填好相关配置 **步骤二：**安装file-loader **步骤三：**进行打包后会发现在dist(存放打包后文件的文件夹)下出现一张图片，而后在webpack.config.js文件中写入如下配置 **步骤四：**再次打包运行即可 ...
webpack打包后图片显示问题
楠的博客
05-04 1万+
1、先解释一下这段配置代码的意思，test是正则匹配规则，匹配项目中所有的以正则规则结尾的格式的文件，然后通过url-loader进行处理，不大于10kb就会进行base64转码，就是将图片转为base65格式，如果超过10KB的图片就单独打包到utils.assetsPath(‘img/[name].[hash:7].[ext]’) 这个目录下，也就是static/img/图片名，2、注意相对路...
loaderutils.getoptions is not a function 解决方案
xuelang532777032的博客
05-31 9328
是不是在webpack编译 vue的时候  报错了？  其实这个问题很简单    cnpm install --global vue-cli cnpm install vue cnpm install vue-loader vue-template-compiler loader-utils 直接从淘宝更新下这几个吧  别 用npm 用  cnpm
webpack5打包报错：CssSyntaxError(1:1) xxx Unknown word import api from xxx ； import content from xxx
qq_45327886的博客
03-17 5010
unknown word webpack打包scss文件报错 import api from xxx,import content from xxx
解决webpack5打包CSS图片路径不正确问题
火星基地
03-25 4478
问题 最近在重构博客时，遇到了一个问题。在生产模式下，使用的MiniCssExtractPlugin.loader代替style-loader，但图片、字体等资源文件输出路径设置不正确，webpack 配置如下： module.exports = merge(common, { target: 'browserslist', mode: 'production', devtool: false, output: { path: path.resolve(ROOT_PATH, './b
webpack对图片路径的处理
qq_38796823的博客
04-18 4790
前言 原本我们写在网页中的代码，其中对图片资源路径的引入，在打包后文件位置会发生变化，这时图片路径也会发生变化。 这时我们需要解决这个问题：不管位置怎么变，图片路径一定是正确的！ 图片大致分为如下几种情况： css中的图片问题 网页标签img中的图片（分为静态的和绑定的） 一、css中的图片问题 安装相应的图片解析模块【解析与压缩】 yarn add url-loader file-loa...
img打 webpack_Webpack打包图片路径问题
weixin_39770311的博客
12-20 552
Webpack使用file-loader处理图片在页面中引入图片有两种方式img标签引入css引入file-loader配置{test: /\.jpg|\.png|\.jpeg|\.svg|\.ttf|\.woff$/,use: [{loader: 'file-loader',options: {name: '[name].[ext]',outputPath: './img',publicPath...
webpack—url-loader 解决项目中图片打包路径问题
weixin_33826268的博客
02-13 1370
刚开始用webpack的同学很容易掉进图片打包这个坑里，比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里。下面我们就来分析下在webpack项目中图片的应用场景。1.CSS文件中的背景图等设置项目目录图：以下以我项目中的test.css为例 .test{ color: red; width: 150px...
Webpack5 url-loader file-loader打包后，图片不能正常显示
qq_33767912的博客
09-04 2372
1.在webpack5中url-loader、file-loader已经弃用，如果想要继续使用则需要 ①在use后添加type: 'javascript/auto' ②url-loader默认采用ES模块语法，即import ‘…/aaa.png’； 如果在引入css文件时是comandjs语法就会报错 require('./css/normal.css'); 所以需要将esModule设置为false 或者 引用是写es语法 import ‘…/aaa.png’ module.exp..
Webpack打包css中图片路径问题
qq_24172179的博客
12-07 3512
在入口处entry配置publicpath:”./” 同时一般css是单独打包，用到插件extract-text-webpack-plugin 其中有也有一个publicpath 可以重写原来的pp地址（具体可以看文档） 这里配置为相对路径../这里根据实际情况来判断，以上配置结束打包以后可以以本地file://的方式打开，产品环境可以将entry中的pp地址改成cdn服务器地址，这样就不用...
webpack -- 资源和css中图片引用打包为相对路径的方案
积少成多
07-18 1万+
欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言 最近在用vue-cli+webpack做项目，项目架构搭好了之后，想build之后看看效果，但是build出来的index.html文件中的默认资源引用都是绝对路径，也就是相对于根目录的绝对路径；但是我项目如果部署到线上也不一定是在根目录里呀，所以这种默认相对于根目录的绝对路径肯定是不实用的； 解决方案 ...
解决webpack中css独立成文件后图片路径错误的问题
SailorCai的技术博客
08-27 7097
说明：此配置针对webpack4+ 使用webpack构建项目时将css文件独立出来是常见的做法，在webpack4.0以前是使用extract-text-webpack-plugin， webpack4.0以后使用mini-css-extract-plugin，这里要讲的是后者 我在mini-css-extract-plugin的filename配置加入了css/路径： new Min...
vue webpack打包后图片、js、css路径错误的完美解决方法
weixin_56242672的博客
07-27 5135
项目用rundevbuild打包后，发现很多图片都不显示，在本地是没有问题的啊！找原因发现通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。
webpack打包css中背景图路径报错问题
xuxu_qkz的博客
02-27 5398
webpack打包css中背景图路径报错问题 问题描述：明明打包成功，但是部署到后台时，却发现背景图丢失了 这是背景图的路径 这是链接地址路径 这是webpack打包后的图片存储路径 通过查找原因，我们可以在浏览器运行的HTML代码中发现，背景图的路径不正确，因此我们需要在webpack重新设置你的css-loader路径，只需要添加publicPath 公共路径即可。 limit，代
webpack打包html中img,打包资源成功，图片引用错误，不能显示问题
qq_40410916的博客
04-01 818
//webpack 配置文件 { test: /\.html$/, //处理html文件中img图片，负责引入img，被url-loaer处理,下载npm i html-withimg-loader -D loader: "html-withimg-loader" } const { resolve } = require('path') const HtmlWebpcakPliugin =
解决webpack打包样式url()背景图片问题
12-21 2247
定位错误 项目使用webpack4进行编译，打包后的样式中使用url方法指定的背景图片不能够正常显示 .bgurl{ background-image: url('/images/abc.jpeg') } 上述样式在webpack中编译出错，配置如下 // stylus [ loader: MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { importLoaders: 2, }
升级nodejs版本 安装n模块报错 npm ERR! notsup Unsupported platform
热门推荐
cnoneo的博客
09-09 2万+
如何升级nodejs版本 首先安装n模块， 输入npm install -g n n模块专门用来管理nodejs的版本。 如果出现npm ERR! notsup Unsupported platform for n@2.1.8: wanted {“os”:"!win32",“arch”:“any”} (current: {“os”:“win32”,“arch”:“x64”}) 这样错误信息，在命令...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值