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

最新推荐文章于 2024-06-03 10:46:42 发布
最新推荐文章于 2024-06-03 10:46:42 发布
阅读量1k 收藏 5
点赞数 5
分类专栏： vue 前端 文章标签： vue打包后背景图片不显示？？ vue背景图片链接 解决图片链接问题 vue背景图片不显示 如何让vue背景图片显示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35457469/article/details/100107156
版权
前端 同时被 2 个专栏收录
61 篇文章 2 订阅
订阅专栏
vue
42 篇文章 0 订阅
订阅专栏

当使用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 命令，即可成功显示图片
在这里插入图片描述

僵尸C掉了我的脑子
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue 打包后背景图片不显示问题
YY110621的博客
02-26 1314
大清早遇到一个问题纠结了一小会儿功夫，不过很快解决了，下面是解决方法。 第一步：改变路径配置，将绝对路径改为相对路径。 找到 config/index.js 文件改为如下：不知道地方的看下图即可 目标文件：项目目录 > config文件夹 > index.js   ​​​​​​​assetsPublicPath:'/' 改为：assetsPublicPath:'./' （加...
解决vue打包css文件中背景图片的路径问题
12-12
vue-cli写完的静态页面我们在node环境中引入没有问题，但是打包后放在Apache环境下，路径却有问题了 如一个简单css语句 .welcome { width: 420px; height: 235px; background: url(../img/welcome.jpg) 0 0 no-...
vue打包一篇空白，背景图片不显示
weixin_45378485的博客
11-01 594
一、打包之后一篇空白 1、dist目录下文件的引用路径错误 解决方案：在 config 文件下面的 index.js 文件中，找到这段代码，把 assetsPublicPath: '/'改为assetsPublicPath: './'，更改后的代码： 2、路由模式被改为history, 路由模式默认为hash，只要把路由模式改为默认就好。 二、打包之后，背景图片不显示 解决方案：找打 build...
vue项目使用webpack打包后,图片不显示
weixin_45032622的博客
11-01 5732
vue项目打包后放到服务器上,配置好后,发现页面可以正常访问,访问后端接口也没有问题,但是网页登录界面的背景图片显示不出来.查看控制台也没有报错。错误原因是Webpack打包之后，在webpack.base.conf.js中会有图片大小限制配置{.*)?$/,}我们这里将limit注掉之后，重新打包，图片便可以显示。
vue关于引入本地图片打包之后图片失效问题
最新发布
amber_1210的博客
06-03 273
但是打包之后，图片报错显示404，找不到该图片。发现在该域名下直接接了src文件，但是该域名下并没有src文件夹。使用vite官网提供的方法。（new URL(url, import.meta.url)）1、在utils下面创建一个名为pub-use.ts的文件，方便获取assets的静态资源。2、在使用的页面中，引入该文件。
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
技术共享，共同进步！
04-11 2222
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
vue+webpack项目打包后背景图片加载不出来问题解决
weixin_42966151的博客
01-27 3105
vue+webpack项目打包后背景图片加载不出来问题解决
解决Vue打包后背景图片路径错误问题
源码好优多
03-08 1734
今天在插入背景图片过程中，遇到了路径错误的问题，通过网上查询，找到了解决的办法，但是大部分都没有讲造成这种问题的原因，故我简单地总结了一下，并加入了一些自己的理解，欢迎共同探讨~ 当用vue-cli自动构建项目后，有两种运行方法，分别是： npm run dev : 提供一个开发的环境，自动热更新，资源使用绝对路径，所以可以正常看到背景图片。 npm run buil...
Vue项目中设置背景图片方法
08-28
这个问题的出现主要是由于路径解析的问题，当我们在样式中添加了背景图片后，编译打包后，配置到服务器上时，图片并不能够正确的显示出来。 要解决这个问题，我们可以使用 Node 中的一种比较有效的方式来解决这个...
vue webpack打包后图片路径错误的完美解决方法
10-17
在使用Vue.js和Webpack进行项目开发时，遇到打包后图片路径错误的问题是常见的困扰。Vue CLI在构建过程中，默认的配置可能导致静态资源，如图片，无法正确加载。本文将详细解析这个问题的原因，并提供一种完美的解决...
关于Vue背景图打包之后访问路径错误问题的解决
08-28
Vue背景图打包之后访问路径错误问题的解决 在 Vue 项目中，背景图打包之后访问路径...解决 Vue 背景图打包之后访问路径错误问题的关键是理解背景图片和图片 img 的区别，并且选择合适的解决方案来避免路径错误的问题。
vue3 vite 打包部署完背景图找不到问题
Stubborn_My的博客
02-24 875
在html上绑定:style=="{backgroundImage:'url('+imgs+')'}"引入静态文件 vue3新方法。
vue打包后背景图片不显示问题
weixin_34344677的博客
04-10 898
当用vue-cli自动构建项目后，有两种运行方法，分别是：npm run dev : 提供一个开发的环境，自动热更新，资源使用绝对路径，所以可以正常看到背景图片。npm run build : 打包项目，资源使用相对路径，所以会出现路径错误问题。绝对路径：从盘符开始的路径，如：C:\windows\system32\cmd.exe 相对路径：从当前路径开始的路径构建后的项目, 都需要...
Vue项目打包发布后CSS中的背景图片不显示问题
qq_45190444的博客
07-22 2198
Vue项目打包发布后CSS中的背景图片不显示问题 今天在打包的时候遇到了vue打包后页面上的背景图没有显示出来 解决方式很简单 直接放代码记录一下 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', fallback: 'vue-style-loader' }) } else {
vue打包后，图片不显示，img路径404
热门推荐
rainbow8300的博客
10-11 1万+
vue打包好的文件，访问时显示背景图片没有找到 遇到的问题：开发时图片好好的，打包后，图片不显示，如下图，转盘背景图没有了： 首先，说一下项目里图片引入的三种方式： 在页面中，通过img标签的src="路径"属性； 在css文件中，通过背景图片的url(‘路径’)引入图片； 在js中通过require(‘路径’)引入图片； 造成图片找不到的原因主要是：webpack打包以后，生成一个目录和一...
vue3+vite项目，打包后，图片失效的问题
insist_life的博客
08-02 7398
第一次使用vue3+vite写一个项目，不太清楚这里的配置和vite构建工具的特性，所以在开发的时候，图片的路径都是用的相对路径；这样的静态路径引入，在开发和打包上测试环境都没有问题，都能正常显示！可以发现，在域名下直接接了src文件，但是这个域名下面是没有src文件夹的。所以浏览器报错了，同时页面没有图片显示，所以打包的时候，图片的路径出问题了！结尾：此文章仅为了下一次有相同的问题能够快速的解决，具体造成这种错误的原因需要去了解vite，有时间再说吧！这样的话，开发和上测试的时候，图片都能够正常显示了！
vue3图片不显示？vue3正确动态渲染图片和背景图片——粘贴即可用，亲测好用
lwc18639470699的博客
10-20 2528
vue2是用require引入图片的。在vue3中require会报require is not defined。上代码：vue3中写个方法，方便后期调用。背景图片绑定style写入对应样式即可。在img中src绑定传入路径即可。
vue3+vite项目使用本地图片打包后不显示
Handsome_gir的博客
01-06 2429
vue3+vite项目使用本地图片打包后不显示。
解决vue3项目打包后部署后某些静态资源图片不加载问题
蒾酒的博客
05-12 885
可能是因为在部署后的服务器环境中对中文文件名的支持不完善。服务器在解析 URL 时可能无法正确识别或编码中文字符，导致无法正确找到文件路径。因此，改用英文文件名后，服务器能够正确解析和访问到文件，所以图片显示正常。打开浏览器控制台发现这张图片报错404。然后访问时发现导航栏背景图片没加载。将背景图片名称修改成英文。开发完项目打包并部署。
vue打包后的项目怎么运行？
06-11
Vue 打包后的项目是一个静态资源文件，需要通过 Web 服务器来访问。你可以将打包后的文件上传到 Web 服务器或者 CDN 上，然后通过访问对应的 URL 来访问应用程序。 如果你只是想在本地运行打包后的应用程序，可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值