Vue打包后背景图片路径错误问题，背景图片不显示问题。

最新推荐文章于 2023-04-11 16:35:04 发布
最新推荐文章于 2023-04-11 16:35:04 发布
阅读量457 收藏
点赞数
分类专栏： 前端&VUE 文章标签： VUE HTML JS 前端开发 网页开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013183139/article/details/102482100
版权

npm run dev : 提供一个开发的环境，自动热更新，资源使用绝对路径，所以可以正常看到背景图片。

npm run build : 打包项目，资源使用相对路径，所以会出现路径错误问题。

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

需要在config/index.js中设置

码~小~哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue -- Vue打包后背景图片路径错误
bobobocai的博客
06-26 852
Vue项目中使用图片的方法有如下几种： 1、图片资源放在 assets -> imgs文件夹下面 ①img标签引入图片 <img src="../assets/imgs/bg.png" class="loginImg" /> ②css使用图片 background: url('../assets/imgs/loginback.png') no-repea
关于Vue背景图打包之后访问路径错误问题的解决
08-28
Vue背景图打包之后访问路径错误问题的解决 在 Vue 项目中，背景图打包之后访问路径...解决 Vue 背景图打包之后访问路径错误问题的关键是理解背景图片和图片 img 的区别，并且选择合适的解决方案来避免路径错误的问题。
VUE引入背景图直接使用url(‘@/assets/img...‘)会报错：“This relative module was not found: * ./@/assets/img/“
Sodaxiang的博客
11-26 1559
VUE引入背景图直接使用url('@/assets/img...')会报错："This relative module was not found: * ./@/assets/img/" 场景：直接背景图url('@/assets/img/common/collect.svg')会报错； 解决：在@前面加上~即可。
vue 打包后背景图片无法显示
goxingman的博客
11-27 1319
假如我们在vue中像这样在style中设置background，正常命令行运行vue项目，可以正常显示背景图片，但是一旦打包后，就无法正常访问了 .inp { background: url('../assets/from.png') 0 3px no-repeat; } 查看控制台报错发现，这个url居然去请求后台了，那样是肯定找不到图片了 解决方法： 1、在data中定义如...
Vue项目打包---背景图片无法显示
JBL555的博客
04-17 1464
vue项目中经常会遇到给div设置背景图片，一般会在css中给对应div设置background-image：url(path),但是这个路径本地运行一般本地运行没有问题，打包后放到服务器上运行会发现背景图片无法显示了，查阅后发现这其实和webpack打包有关，要么不要在css中设置background_image，直接在标签中绑定style，例如 <div :style="{backg...
vue打包一篇空白，背景图片不显示
weixin_45378485的博客
11-01 594
一、打包之后一篇空白 1、dist目录下文件的引用路径错误 解决方案：在 config 文件下面的 index.js 文件中，找到这段代码，把 assetsPublicPath: '/'改为assetsPublicPath: './'，更改后的代码： 2、路由模式被改为history, 路由模式默认为hash，只要把路由模式改为默认就好。 二、打包之后，背景图片不显示 解决方案：找打 build...
VUE项目打包（解决背景图片不显示问题）
CSDN_Hss的博客
06-25 761
https://blog.csdn.net/qq_34611721/article/details/80996947
vue webpack打包后图片路径错误的完美解决方法
10-17
在使用Vue.js和Webpack进行项目开发时，遇到打包后图片路径错误的问题是常见的困扰。Vue CLI在构建过程中，默认的配置可能导致静态资源，如图片，无法正确加载。本文将详细解析这个问题的原因，并提供一种完美的解决...
完美解决webpack打包css背景图片路径问题
11-20
总结来说，解决Webpack打包CSS背景图片路径错误的方法是正确配置`MiniCssExtractPlugin`的`publicPath`，使其指向CSS文件相对于根目录的路径。理解Webpack对不同资源的处理方式，以及如何配置相应的loaders和plugins...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
10-16
在开发Vue项目时，我们经常会遇到打包（npm run build）后打开`index.html`页面出现空白，以及图片路径错误的问题。这两个问题对于项目的部署和运行是至关重要的，下面将详细解释这些问题的原因及解决方案。 问题一...
vue 项目打包时样式及背景图片路径找不到的解决方式
12-13
问题描述：vue项目打包后，文件找得到，但是引用的字体及背景图片找不到； 解决方法： 主要是需要单独为 css 配置 publicPath 。 ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api，可以为css单独配置 publicPath 。 对于用 vue-cli 生成的项目，dist 目录结构如下： dist ├── index.html └── static     ├── css     ├── img     └── js 经常遇见的问题是 css 中 background-image 的相对路径不能正确的引用到 img 文
解决vue打包css文件中背景图片的路径问题
10-18
今天小编就为大家分享一篇解决vue打包css文件中背景图片的路径问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
08-27
下面小编就为大家分享一篇解决在vue项目中,发版之后,背景图片报错,路径不对的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
齐枭飞 Vue系列--vue的图片路径，和背景图片路径打包后错误解决
一个来自外太空的游客
09-19 428
老实的按照官网提供的，搭建的了 webpack+vue+vuex+vue-router，，因为是自己搭建的，所以踩了不少坑，一般问题百度都有，这个背景图片的问题，查了很久才解决。 1、找到 config-&gt;index.js里面，如下修改 2、找到 build-&gt;utils.js,在里面加入一句publicPath:’…/…/’, [图片上传中…(image-7129b4-152301...
Vue项目打包发布后CSS中的背景图片不显示问题
qq_45190444的博客
07-22 2202
Vue项目打包发布后CSS中的背景图片不显示问题 今天在打包的时候遇到了vue打包后页面上的背景图没有显示出来 解决方式很简单 直接放代码记录一下 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', fallback: 'vue-style-loader' }) } else {
vue项目使用webpack打包后,图片不显示
weixin_45032622的博客
11-01 5745
vue项目打包后放到服务器上,配置好后,发现页面可以正常访问,访问后端接口也没有问题,但是网页登录界面的背景图片显示不出来.查看控制台也没有报错。错误原因是Webpack打包之后，在webpack.base.conf.js中会有图片大小限制配置{.*)?$/,}我们这里将limit注掉之后，重新打包，图片便可以显示。
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
技术共享，共同进步！
04-11 2225
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
vue+webpack项目打包后背景图片加载不出来问题解决
weixin_42966151的博客
01-27 3112
vue+webpack项目打包后背景图片加载不出来问题解决
解决vue项目打包后背景图片找不到的问题
qq_38472574的博客
11-16 454
解决vue项目打包后背景图片找不到的问题
vue项目打包后图片路径问题
最新发布
05-18
在 Vue 项目中，打包后的图片路径问题通常需要设置 publicPath，这个路径是相对于你的服务器根目录的路径，可以在 vue.config.js 文件中进行配置，示例代码如下： ``` module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/your-project-name/' : '/' } ``` 在上面的代码中，如果你的项目名称为 your-project-name，则在生产环境下图片路径为 /your-project-name/img/xxx.jpg，如果你没有设置项目名称，则直接设置为 /img/xxx.jpg。同时，需要注意的是，在使用 img 标签引入图片时，路径应该以 / 开头，例如： ``` <img src="/img/xxx.jpg"> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码~小~哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值