vue打包后背景图片不显示问题

最新推荐文章于 2024-11-13 13:46:37 发布
最新推荐文章于 2024-11-13 13:46:37 发布
阅读量800 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端开发 vue 全栈工程师 文章标签： vue 打包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43287934/article/details/88370895
本文指导如何在build/utils.js文件中加入特定红框内容，确保配置与个人环境相符，以实现个性化设置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

打开build/utils.js，在图中相应位置加入红框内容，其中值可能会有不同，若不同，自己配置成相应的即可。

在这里插入图片描述

Vue 打包后背景图片不显示问题
YY110621的博客
02-26 1548
大清早遇到一个问题纠结了一小会儿功夫，不过很快解决了，下面是解决方法。 第一步：改变路径配置，将绝对路径改为相对路径。 找到 config/index.js 文件改为如下：不知道地方的看下图即可 目标文件：项目目录 > config文件夹 > index.js   ​​​​​​​assetsPublicPath:'/' 改为：assetsPublicPath:'./' （加...
vue 项目打包时样式及背景图片路径找不到的解决方式
10-16
这一问题经常出现在Vue项目打包后，尽管文件可以被正确找到，但引用的资源文件，如字体和背景图片等却无法正确加载。这一问题主要与资源路径的配置有关。本文将详细介绍如何解决Vue项目打包时样式及背景图片路径无法...
Vue解决报错10_项目打包后图片不显示问题（只显示缩略图）
xiaosi的博客
10-30 709
问题描述 登录首页的logo不能正确显示，如图 对应代码 <!-- <img src="src\asserts\ims\zgyd_log.png" /> --> 其中路径应该是没问题的 但就是不显示 问题解决 思路 上面我是引用的本地的图片，如果你引用网上图床的图片，请确保url正确，可以浏览器访问验证能否访问到图片 本地引用的话，无非就是资源格式问题，如svg是否支持，再者就是路径问题 解决，这里修改了路径<img class="logo" src="~@/asset
vue打包后图片不显示问题
简单随风的博客
09-06 6471
今天给登录页面加了一个背景图，结果部署到服务器上后，发现图片不见了！！ 我本地是这样： 部署上去变成了这样： 然后百度搜了下，大概原因是因为路径的问题，部署到服务器上后找不到静态资源 修改build/utils.js 在下列代码中添加 publicPath: '../../' 问题解决！ 更多样式及图片问题，可以参考这篇文章。 ...
vue项目使用webpack打包后,图片不显示
weixin_45032622的博客
11-01 6105
vue项目打包后放到服务器上,配置好后,发现页面可以正常访问,访问后端接口也没有问题,但是网页登录界面的背景图片显示不出来.查看控制台也没有报错。错误原因是Webpack打包之后，在webpack.base.conf.js中会有图片大小限制配置{.*)?$/,}我们这里将limit注掉之后，重新打包，图片便可以显示。
vue项目webpack打包后图片不展示问题
吴佳强的博客
01-10 1126
vue项目webpack打包后图片不展示问题
解决Vue打包后访问图片/图标不显示的问题
10-16
总结一下，解决Vue打包后图片和图标不显示的问题主要涉及两个步骤：一是检查并修正CSS中引用资源的路径，二是通过配置`publicPath`让Vue CLI在打包时自动处理资源路径。完成这两个步骤后，你应该能够成功地在生产...
关于Vue背景图打包之后访问路径错误问题的解决
08-28
Vue背景图打包之后访问路径错误问题的解决 在 Vue 项目中，背景图打包之后访问路径...解决 Vue 背景图打包之后访问路径错误问题的关键是理解背景图片和图片 img 的区别，并且选择合适的解决方案来避免路径错误的问题。
解决vue打包css文件中背景图片的路径问题
12-12
vue-cli写完的静态页面我们在node环境中引入没有问题，但是打包后放在Apache环境下，路径却有问题了 如一个简单css语句 .welcome { width: 420px; height: 235px; background: url(../img/welcome.jpg) 0 0 no-...
解决vuejs项目里css引用背景图片不能显示的问题
12-12
解决：build->utils.js里，修改：增加 publicPath:&#39;../../&#39;, if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath:&#39;../../&#39;, fallback: &#39;vue-style-loader&#39; }) } else { return [&#39;vue-style-loader&#39;].concat(loaders) } 以上这篇解决vuejs项目里css引用背景图片不能显示的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也
解决vue打包之后静态资源图片失效的问题
08-28
下面小编就为大家分享一篇解决vue打包之后静态资源图片失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 打包后背景图片无法显示
goxingman的博客
11-27 1399
假如我们在vue中像这样在style中设置background，正常命令行运行vue项目，可以正常显示背景图片，但是一旦打包后，就无法正常访问了 .inp { background: url('../assets/from.png') 0 3px no-repeat; } 查看控制台报错发现，这个url居然去请求后台了，那样是肯定找不到图片了 解决方法： 1、在data中定义如...
vue项目使用webpack打包部署后,图片不显示，查看控制台也没有报错。
u010609022的专栏
11-13 307
错误原因是Webpack打包之后，在webpack.base.conf.js中会有图片大小限制配置。// limit: 10000,（注释掉就好了）
vue打包后 背景图不显示
蒲小若的博客
12-21 809
这两天做了一个项目，在做好登录之后进行打包放到服务器上，在本地跑的时候一切正常，但是在服务器上跑的时候发现登录页面的背景图没有了，是一片空白，为此找到了一下解决方案 在build 下的 utils.js中找到： if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, ...
vue打包后图片css中背景图路径不对
qq5678574的博客
12-11 341
问题描述： 自己在自学vue做项目的过程中，遇到一个有关背景图片路径的问题，就是css代码中背景图片是根据相对路径来写的，如下图： 当使用npm run dev命令本地访问的时候，背景图片是正常显示的，可使用npm run build命令打包后，访问dist目录下的项目，页面背景图路径就不对了，显示不出背景图。如下两张图对比： 图一：使用npm run dev命令访问 图二：使用npm run build命令打包之后，访问dist目录下的文件，出现的问题，背景图片路径变成了http://127.0.0.
vue cli4 阻止图片转base64
Tankic的博客
02-23 2289
文章目录介绍功能步骤在项目根目录中新建vue.config.js文件vue.config.js文件内容 介绍 在使用vue cli4的过程中，我们遇到比较小的图片被转成了base64格式的编码。但实际使用的时候不需要，因为转码后的图片不够清晰，特别是在大屏和高分辨率的显示器时尤甚。 参考文献：vue.config.js配置参考 功能 避免vue cli4图片转码 步骤 在项目根目录中新建vue.config.js文件 vue.config.js文件内容 var path = require('path
vue项目打包后出现页面布局异常、图片显示不出来等问题
weixin_46545863的博客
07-25 6401
vue项目打包后出现页面布局异常、图片显示不出来等问题
vue设置背景图片不显示
最新发布
04-02
### Vue 中设置背景图片不显示的解决方案 在 Vue 项目中，当尝试通过 CSS 的 `background` 属性设置背景图片时，可能会遇到图片无法正常加载的情况。以下是针对该问题的具体分析以及可行的解决方案。 #### 方法一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值