vue webpacket 打包后 backgroundImg 不显示问题

最新推荐文章于 2024-04-09 15:02:08 发布
原创 最新推荐文章于 2024-04-09 15:02:08 发布 · 481 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue webpacket 

本文详细介绍了在Vue项目中使用less时，如何正确引用大图片以确保其在打包后能够正常显示。通过在build/utils.js中添加publicPath参数，解决了背景图片无法加载的常见问题。

vue中使用的less 小图标 ，这样引用打包后是可以显示的，但是大图片同样这样引用就不会显示

background:url('~@assets/images/mine/mine_bg.png') no-repeat;

解决办法：

build/utils.js中

use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'  添加publicPath: '../../'就可以显示
vue-cli 打包后element图标异常不显示问题
前端程序员、项目经理、人工智能博主
12-04 2259
vue打包后如下element图标不显示 控制台报错 显示没有找到element-icons资源 解决办法： 在build文件下的utils.js文件中添加这一句publicPath:’…/…/' 找到我如下代码中去添加 // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return Ex
vue3 - vite项目打包部署服务器上线后图片不显示并且路径中存在undefined字眼，本地开发环境下正常显示图像没任何问题，但build编译打包后上传到线上服务器后再打开就不显示了，路径有问题
最新发布
高级前端工程师
08-18 4646
vue3，vite，图片不显示，图像加载失败，打包后图片路径不对，前面多了一个undefined，本地没问题只要打包上线就报错，vue3 vite项目解决部署线上图片URL失效问题，使用本地图片打包后不显示，本地资源路径，本地图片图标，图标不显示，打包后图片失效的问题，访问图片/图标不显示的问题，vue3+vite打包后图片路径错误不显示，背景图打包之后访问路径错误问题的解决，打包部署到服务器上却显示路径undefined问题，图片url域名错误，导致无法显示，还是报错显示不了，如何解决，无效，还是不行，r
解决vue项目打包后设置的backgroundimg无法显示的问题
qq_40816360的博客
01-12 1410
打开build/utils.js 进行设置如下： if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', fallback: 'vue-style-loader' }) } else { return ['vue-st...
vue项目,webpack4.x，打包后项目背景图不显示问题
blingsky123的博客
07-08 678
问题：打包后项目背景图不显示 原因：背景图不显示是由于插件（MiniCssExtractPlugin）配置问题， 解决： webpack.conf.js文件中 应该改为如下配置： new MiniCssExtractPlugin({ // filename: "css/[name].css" filename: utils.assetsPath('css/[name].css'), }), ...
Webpack打包图片-JS-Vue文件
凉茶铺的博客
01-12 4028
介绍了webpack如何打包图片等静态资源、如何使用label打包js、如何打包vue文件，最后介绍了在webpack中如何配置扩展名和别名。
Webpack+vue+element逐步搭建开发环境
u013970971的博客
12-07 1万+
Webpack+vue+element逐步搭建开发环境                                                                         作者：H先生 （转载请注明出处） 转载于: http://yiweifen.com/html/news/WaiYu/20433.html 在搭建整个环境之前，首先默认你已了解了n
webpack整合Vue
qq_45248344的博客
09-28 447
通过render函数渲染组件，使用webpack导入Vue和Vue-router，以及组件分离为单个.vue组件文件，还包括路由使用、嵌套、抽离，包括组件文件中样式的使用
Vue 打包后背景图片不显示问题
YY110621的博客
02-26 1588
大清早遇到一个问题纠结了一小会儿功夫，不过很快解决了，下面是解决方法。 第一步：改变路径配置，将绝对路径改为相对路径。 找到 config/index.js 文件改为如下：不知道地方的看下图即可 目标文件：项目目录 > config文件夹 > index.js   ​​​​​​​assetsPublicPath:'/' 改为：assetsPublicPath:'./' （加...
[已解决]electron-builder vue 打包后iconfont/element-ui字体图标不显示问题
张小斌
05-27 9584
element-ui字体图标无效是因为文件引用路径错误，将其样式资源作为静态资源打包，就可以解决。
vue项目打包 打包运行报错以及Element UI字体图标不显示问题解决详细过程
格の调
03-08 3892
vue项目本地开发完成后要部署上限，需要先把项目打包，打包步骤我经过试错，总结出简单3步完成。 项目有更新情况打包： 非首次打包可直接：npm run build 即项目前期已经配置好，并经打包部署过运行没有什么问题，后期局部修改后重新打包，可直接运行以上命令进行打包。 项目初次打包部署 项目初次打包部署或打包后运行有问题，需进行以下三步操作： 第1,2步中修改的2处文件位置： 1.config>index.js 文件 里面的dev是开发环境，build是打包部署运行的版本。 找到build
Vue.js入门 4_webpack和单文件组件
抹不去你留下的唇印的博客
12-27 511
Vue.js快速入门
Electron+Vue项目打包后背景图片丢失问题
qq_62291805的博客
04-09 1099
本地启动的项目，背景图片是可以显示的，但是打包之后，启动exe文件，发现启动之后只有背景图没有显示。在vue.config.js文件中添加customFileProtocol:'./'再次打包项目，启动exe，发现背景图片已经可以显示了。打包后打开控制台发现是路径错误。我的背景图是通过css引入的。
vue2.0采坑 background-image 不显示
飘雪的博客
07-07 1万+
问题描述：          笔者在用vue2.0+进行开发时，遇到 <div style="background-image:url('../assets/images/图片.jpg');" >    图片显示 不出来 反复确认引入的背景图片路径也没错，然后图片就是显示不出来，也不知道怎么回事 后经过自己。。。。，问题得到了解决. 解决方案： 1. 在script代码块...
vuejs在css样式表里设置背景图background:url('path'),报错
萧萧的博客
06-26 2万+
解决办法：1、在webpack.prod.conf.js文件里output里面添加：publicPath：'./'2、在utils.js文件里添加 publicPath:'../../'3、在config/index.js文件里，添加assetsPublicPath:'./'css样式表文件这样写这样就可以正常使用了...
webpack background-image css 显示不了
wyk304443164的专栏
05-12 4440
webpack.config.js看一下区别：oldvar path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var HtmlWebpackPlugin = require("html-webpack-plu
Vue项目中background-image属性设置方法
彭世瑜的博客
04-07 2万+
vue项目中background-image属性设置方法 方式一：直接访问 在vue-cli项目中的放在public目录下的资源会被直接复制，不会经过webpack的打包处理。 <span class="item-icon"></span> <style> .item-icon { width: 20px; height: 20px; background-size: 20px 20px; vertical-align: middle; /* 放置
vue踩坑系列——backgroundImage路径问题
热门推荐
有问题可关注公众号：前端研究院 后台输入问题回复
08-08 4万+
项目中图片都放在src/img文件夹，img和background-image引用都用相对路径，即../../这种形式 在打包build的设置路径assetsPublicPath: ‘./‘，然后那些没有转成base64的背景图都失效了，，路径。 处理方法： 使用require引入图片 img标签 &amp;lt;img :src=&quot;require('assets/img/header/sea...
vue 通过background-image引入图片失效问题
weixin_30505751的博客
07-16 4796
一、以下情况webpack根本找不到图片资源 <div class="test" style="background-image: url(test.jpg);"></div> <style lang="scss"> .test { width:100px; height:100px; background-image:url("../....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值