项目打包后CSS中引用的背景图不显示

最新推荐文章于 2024-02-29 06:24:39 发布
最新推荐文章于 2024-02-29 06:24:39 发布
阅读量598 收藏
点赞数
分类专栏： 前端 文章标签： vue css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42325228/article/details/107672936
版权

vue项目中，使用CSS样式引用了一张背景图片，在开发环境下是能够正常显示的，但是执行build打包之后图片没有显示。

解决方法：

找到vue项目下的build/utils.js文件

修改成为如下所示内容：

在这里插入图片描述

添加：publicPath:’…/…/’,

即可。

七七chengxu媛
关注
专栏目录
css加载一张图片 设置整个页面背景
A_aspectJ的博客
08-31 1165
在css中，可以使用background-image或background属性来加载图片。这两个属性都可以配合url()函数来为元素设置背景图像。background-image属性为元素设置背景图像，而background是一个简化属性，可以在一个声明中设置所有背景样式，当然也包括背景图片。
webpack中把css文件打包成独立文件，背景图片不显示的问题
Coralpapy的博客
08-05 525
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-.
vue项目打包后css背景图片无法显示问题
Arlisol的博客
02-24 3321
博主在测试打包项目时发现自己使用的404页面的背景图片无法显示，经过之前的问题，基本推断又是路径问题。在搜索引擎一番查找后发现果然是路径的问题，因为打包后的css文件在static文件夹下的css文件夹中，static文件夹和index.html是同级关系，这样引用时的路径就不对了，下面上解决办法： 在build/utils.js文件中相应位置修改如下： // Extract CSS when t...
css图片的显示不出来,wepback打包时，css的背景图片显示不出来，求教！
weixin_42565971的博客
08-04 187
如题。项目环境使用 webpack 构建的，webpack 这块配置的相关代码是module: {loaders: [{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel' },{ test: /\.less$/, exclude: /node_modules/, loader: 'style!css!postcss!less...
css的背景图片不显示,wepback打包时，css的背景图片显示不出来，求教！
weixin_29341975的博客
08-03 154
如题。项目环境使用 webpack 构建的，webpack 这块配置的相关代码是module: {loaders: [{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel' },{ test: /\.less$/, exclude: /node_modules/, loader: 'style!css!postcss!less...
html背景图片css怎么添加,css样式怎么插入背景图片？
weixin_33380613的博客
06-04 7080
css样式怎么插入背景图片？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。在css中，给html元素添加背景图，主要通过background-image属性来设置。background-image 属性设置一个元素的背景图像。元素的背景是元素的总大小，包括填充和边界(但不包括边距)。默认情况下，background-image放置在元素的左上角，并重复...
解决vuejs项目里css引用背景图片不能显示的问题
10-18
通过上述步骤，你应该能够解决Vue.js项目中CSS引用背景图片无法显示的问题。记住，理解Webpack的工作方式和项目结构对于解决这类问题至关重要。同时，保持良好的代码组织和规范化的路径引用也是避免此类问题的有效...
解决vue打包css文件中背景图片的路径问题
10-18
在Vue项目开发过程中，常常会遇到打包后css中背景图片路径出现错误，导致在生产环境中无法正确加载图片的问题。本文将详细探讨这一问题，并分享解决方案。 首先，需要明确背景图片路径错误的常见原因。在开发环境下...
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
01-19
使用vue打包，通过css引用图片资源。 .img { height: 500px; width: 100%; background: url(./assets/img/1.jpg) no-repeat; background-size: 100%; } 热更新开发环境的效果是这样 但打完包出来的页面却报...
基于react项目打包css引用路径错误解决方案
01-18
执行npm start 一切正常, 但是 npm run build 之后生成的打包文件只能在根目录访问 这样放在服务器目录就访问不到了 报错为 手动更改index.html的路径之后又报静态资源引入错误 报错 解决方案 解决： 在...
CSS——scss中动态引入背景图
qq_43201350的博客
02-29 1419
CSS——scss中动态引入背景图
vue打包后css引入背景不显示解决
qq_40291247的博客
08-21 248
一，原因是，因为打包后css和img是同级，所以要改：build→utils.js→找到如下 // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return ExtractTextPlugin...
解决webpack打包css背景图片路径问题
QQQ777jokero的博客
12-09 461
解决webpack打包css背景图片路径问题 webpack.config.js文件 const path = require('path') const htmlWebpackPlugin = require('html-webpack-plugin') // 导入每次删除文件夹的插件 const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 导入抽取css的插件 const MiniCssExtractPlugi
CSS背景属性
煎饼灬果子的博客
04-20 290
Property 描述 background 简写属性，作用是将背景属性设置在一个声明中。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 background-color 设置元素的背景颜色。 background-image 把图像设置为背景。 background-position 设置背景图像的起始位置。
css如何设置背景图片？background属性添加背景图片
热门推荐
lin123_00的博客
05-18 5万+
在前端开发过程中，为了页面的美观，往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景？本章就给大家介绍css怎样设置背景图片。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 更多相关视频： 0基础前端利用『HTML+CSS』制作你喜欢的暗黑破坏神网页开发：BV1C54y1X7ro 前端发展简史，功能以及未来趋势！（你值得观看）：BV1w5411s7e4 给想学编程又无从下手的小白一些建议：BV1Zf4y117ji 「HTML+CSS」实现妙笔千山.
vue打包后CSS中引用的背景图片不显示问题
小圣贤君的博客
11-15 9106
vue项目中，在css样式中引用了一张背景图片，开发环境下是可以正常显示，build之后背景图片不显示。 解决方法： 找到build/utils.js文件 修改成为如下所示内容： 添加红框中的内容即可。
Vue项目打包发布后CSS中的背景图片不显示问题
qq_45190444的博客
07-22 2271
Vue项目打包发布后CSS中的背景图片不显示问题 今天在打包的时候遇到了vue打包后页面上的背景图没有显示出来 解决方式很简单 直接放代码记录一下 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', fallback: 'vue-style-loader' }) } else {
vite 打包vue，style 中的背景图丢失了
最新发布
09-11
如果你的背景图片引用的是相对路径，并且指向的是dist公共文件夹之外的路径，打包后访问到的图片就可能找不到，导致显示为空白或者404错误。 解决这个问题通常需要做以下操作： 1. **修改图片路径**：将图片移到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值