vue打包后背景图片不显示？？

最新推荐文章于 2025-06-18 11:24:19 发布
原创 最新推荐文章于 2025-06-18 11:24:19 发布 · 1.2k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue打包后背景图片不显示？？ #vue背景图片链接 #解决图片链接问题 #vue背景图片不显示 #如何让vue背景图片显示

本文解决了一个常见的Vue项目打包问题：在使用npm run build后，页面背景图无法正常显示。通过修改build/utils.js文件中的publicPath设置，确保了打包后的静态资源能够正确加载。

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

当使用npm run dev命令本地访问的时候，背景图片是正常显示的，可使用npm run build命令打包后，访问dist目录下的项目，页面背景图路径就不对了，显示不出背景图。

问题根源

在项目开发中可以显示背景图：
在这里插入图片描述
使用npm run build打包后的项目不显示背景：
在这里插入图片描述
由上图背景图片链接地址可看出，打包后的文件仍然向http://wap.xxxxxx.com/specialist/static/css/static/img/sec02_bg.34edfcc.jpg中访问文件，而实际在dist目录下，图片路径是这样的，如下图
在这里插入图片描述

解决问题

打开build/utils.js文件，并添加一行代码：

publicPath: '../../'

添加位置如下：
在这里插入图片描述
然后重新执行 npm run build 命令，即可成功显示图片
在这里插入图片描述

Vue 打包后背景图片不显示问题
YY110621的博客
02-26 1548
大清早遇到一个问题纠结了一小会儿功夫，不过很快解决了，下面是解决方法。 第一步：改变路径配置，将绝对路径改为相对路径。 找到 config/index.js 文件改为如下：不知道地方的看下图即可 目标文件：项目目录 > config文件夹 > index.js   ​​​​​​​assetsPublicPath:'/' 改为：assetsPublicPath:'./' （加...
解决Vue打包后背景图片路径错误问题
源码好优多
03-08 1871
今天在插入背景图片过程中，遇到了路径错误的问题，通过网上查询，找到了解决的办法，但是大部分都没有讲造成这种问题的原因，故我简单地总结了一下，并加入了一些自己的理解，欢迎共同探讨~ 当用vue-cli自动构建项目后，有两种运行方法，分别是： npm run dev : 提供一个开发的环境，自动热更新，资源使用绝对路径，所以可以正常看到背景图片。 npm run buil...
在vue项目中图片不显示原因分析及解决方案
最新发布
baifangfang521的博客
06-18 258
图片显示问题可能由多种原因导致：路径拼接、服务器配置、组件冲突、资源缺失或跨域限制。代码中通过getFullImageUrl方法拼接基础URL和相对路径，并处理了异常情况。解决方案包括检查环境变量VUE_APP_BASE_API配置、验证网络请求、测试直接访问URL以及确认服务器权限设置。若问题持续，需要提供浏览器请求截图、环境变量值和直接访问结果等更多信息进行深入排查。
vue打包一篇空白，背景图片不显示
weixin_45378485的博客
11-01 713
一、打包之后一篇空白 1、dist目录下文件的引用路径错误 解决方案：在 config 文件下面的 index.js 文件中，找到这段代码，把 assetsPublicPath: '/'改为assetsPublicPath: './'，更改后的代码： 2、路由模式被改为history, 路由模式默认为hash，只要把路由模式改为默认就好。 二、打包之后，背景图片不显示 解决方案：找打 build...
vue 打包后背景图片无法显示
goxingman的博客
11-27 1399
假如我们在vue中像这样在style中设置background，正常命令行运行vue项目，可以正常显示背景图片，但是一旦打包后，就无法正常访问了 .inp { background: url('../assets/from.png') 0 3px no-repeat; } 查看控制台报错发现，这个url居然去请求后台了，那样是肯定找不到图片了 解决方法： 1、在data中定义如...
vue打包后 背景图不显示
杨雪枫的博客
07-22 277
在build 下的 utils.js中找到： if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', }) } else { return ['vue-style-loader...
解决Vue打包后访问图片/图标不显示的问题
10-16
总结一下，解决Vue打包后图片和图标不显示的问题主要涉及两个步骤：一是检查并修正CSS中引用资源的路径，二是通过配置`publicPath`让Vue CLI在打包时自动处理资源路径。完成这两个步骤后，你应该能够成功地在生产...
vue 项目打包时样式及背景图片路径找不到的解决方式
10-16
这一问题经常出现在Vue项目打包后，尽管文件可以被正确找到，但引用的资源文件，如字体和背景图片等却无法正确加载。这一问题主要与资源路径的配置有关。本文将详细介绍如何解决Vue项目打包时样式及背景图片路径无法...
关于Vue背景图打包之后访问路径错误问题的解决
08-28
Vue背景图打包之后访问路径错误问题的解决 在 Vue 项目中，背景图打包之后访问路径...解决 Vue 背景图打包之后访问路径错误问题的关键是理解背景图片和图片 img 的区别，并且选择合适的解决方案来避免路径错误的问题。
electron-vue打包后背景图不显示的问题
qq_59599812的博客
07-04 527
2.在vue-config.js中配置加上customFileProtocol:"./"1.以上是我打包的路径。
vue打包后背景图片不显示问题
疯流人物
03-02 1283
vue打包后CSS中引用的背景图片不显示问题 今天在插入背景图片过程中，遇到了路径错误的问题，通过网上查询，找到了解决的办法，但是大部分都没有讲造成这种问题的原因，故我简单地总结了一下，并加入了一些自己的理解，欢迎共同探讨~ 当用vue-cli自动构建项目后，有两种运行方法，分别是： npm run dev : 提供一个开发的环境，自动热更新，资源使用绝对路径，所以可以正常看...
Vue项目打包发布后CSS中的背景图片不显示问题
qq_45190444的博客
07-22 2352
Vue项目打包发布后CSS中的背景图片不显示问题 今天在打包的时候遇到了vue打包后页面上的背景图没有显示出来 解决方式很简单 直接放代码记录一下 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', fallback: 'vue-style-loader' }) } else {
vue项目使用webpack打包后,图片不显示
weixin_45032622的博客
11-01 6106
vue项目打包后放到服务器上,配置好后,发现页面可以正常访问,访问后端接口也没有问题,但是网页登录界面的背景图片显示不出来.查看控制台也没有报错。错误原因是Webpack打包之后，在webpack.base.conf.js中会有图片大小限制配置{.*)?$/,}我们这里将limit注掉之后，重新打包，图片便可以显示。
vue项目使用webpack打包部署后,图片不显示，查看控制台也没有报错。
u010609022的专栏
11-13 307
错误原因是Webpack打包之后，在webpack.base.conf.js中会有图片大小限制配置。// limit: 10000,（注释掉就好了）
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
技术共享，共同进步！
04-11 2455
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
Electron+Vue项目打包后背景图片丢失问题
qq_62291805的博客
04-09 1007
本地启动的项目，背景图片是可以显示的，但是打包之后，启动exe文件，发现启动之后只有背景图没有显示。在vue.config.js文件中添加customFileProtocol:'./'再次打包项目，启动exe，发现背景图片已经可以显示了。打包后打开控制台发现是路径错误。我的背景图是通过css引入的。
vue+webpack项目打包后背景图片加载不出来问题解决
weixin_42966151的博客
01-27 3235
vue+webpack项目打包后背景图片加载不出来问题解决
解决vue3项目打包后部署后某些静态资源图片不加载问题
蒾酒的博客
05-12 2335
可能是因为在部署后的服务器环境中对中文文件名的支持不完善。服务器在解析 URL 时可能无法正确识别或编码中文字符，导致无法正确找到文件路径。因此，改用英文文件名后，服务器能够正确解析和访问到文件，所以图片显示正常。打开浏览器控制台发现这张图片报错404。然后访问时发现导航栏背景图片没加载。将背景图片名称修改成英文。开发完项目打包并部署。
vue3 动态style[‘background‘] 图片url 打包后图片不显示没有打包到目录的为你
oMangGuoBuDing1的专栏
08-30 867
做了一个项目需求是 动态赋予多个div的背景图片，背景svg是后台数据中给的。刚开始显示不出来后来解决了（好用代码也如下可参考），后来又发现一个问题是 开发环境下可以正常显示，但部署后 svg图片不显示，排查发现是打包后根本没有把这个url对应的图片放到部署目录的assets中。然后又在网上找发现原因是太小的图片 被打包编译成了base64，因为放尺寸大一点的图片就显示正常。做法是把打包的base64尺寸阈值调成0，这样所有svg图片都可原样正常打包放入到assets中就解决了设置方法如下。
vue设置背景图片不显示
04-02
### Vue 中设置背景图片不显示的解决方案 在 Vue 项目中，当尝试通过 CSS 的 `background` 属性设置背景图片时，可能会遇到图片无法正常加载的情况。以下是针对该问题的具体分析以及可行的解决方案。 #### 方法一...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值