vue打包发布之后图片路径错误

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

#vue

本文解决Vue项目中非根目录发布后图片路径错误的问题。通过修改config/index.js中的assetsPublicPath，将其设置为'/main/invite/'，确保图片资源正确加载。

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

非根目录下，vue打包发布之后图片路径错误

发布图片的路径问题
找到config目录下的index.js
assetsPublicPath 修改为根目录下的路径

build: {
    assetsPublicPath: '/main/invite/',
关于Vue背景图打包之后访问路径错误问题
黑黑黑客儿
03-22 1万+
通过vue-cli脚手架创建的vue项目中，背景图片打包之后路径访问错误。 导致该问题的原因：是url-loader的匹配路径。 解决方案1：设为img标签； 解决方案2：修改limit值； 解决方案3：css不单独打包；
关于Vue背景图打包之后访问路径错误问题的解决
08-28
Vue背景图打包之后访问路径错误问题的解决 在 Vue 项目中，背景图打包之后访问路径错误的问题是很常见的。这个问题的出现是因为 url-loader 的配置对图片的限制大小过小造成的。当图片小于 10KB 时，url-loader 会...
解决vue项目打包后提示图片文件路径错误的问题
08-27
主要介绍了解决vue项目打包后提示图片文件路径错误的问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
解决Vue打包后背景图片路径错误问题
weixin_34203426的博客
03-22 228
1.原因解析 当用vue-cli自动构建项目后，有两种运行方法，分别是： 　　npm run dev : 提供一个开发的环境，自动热更新，资源使用绝对路径，所以可以正常看到背景图片。 　　npm run build : 打包项目，资源使用相对路径，所以会出现路径错误问题。 注: 绝对路径：从盘符开始的路径，如：C:\windows\system32\cmd.exe 相对路径：从当前路径开始的路径 ...
vue打包后图片路径错误
weixin_43837268的博客
07-02 2184
vue 打包后 static 中图片路径不对的问题 `template` 中 `img` 标签中 `src` `template` 中 `img` 标签中 `v-bind:src` 在做这个 vue-cms 项目时，npm run build 打包部署后，然后 访问 的时候，发现：图片不能正常的显示（包括背景图，logo 之类的），请求的路径都 404 了。我的图片都放在了 static/imag...
vue webpack打包后图片路径错误的完美解决方法
10-17
在使用Vue.js和Webpack进行项目开发时，遇到打包后图片路径错误的问题是常见的困扰。Vue CLI在构建过程中，默认的配置可能导致静态资源，如图片，无法正确加载。本文将详细解析这个问题的原因，并提供一种完美的解决...
vue-cli中打包图片路径错误的解决方法
08-29
vue-cli中打包图片路径错误的解决方法 Vue-cli是一个流行的前端开发工具，它提供了一种快速构建和部署Web应用程序的方式。但是，在使用vue-cli打包图片时，可能会出现图片路径错误的問題，这篇文章将为大家介绍如何...
vue 打包后 static 中图片路径不对的问题，腾讯T2大佬手把手教你
2401_84139728的博客
04-11 878
没错，其实在我们准备打包项目之前，需要考虑的一个问题是：【我们的项目最终是要部署在根目录还是子目录】如果是部署在，并不会出现什么问题，因为你的资源文件放在static中，然后你在引用的时候，都是这样的路径来引用（不管是css中，还是template中），这样是不会有任何问题的。大家看到我这个项目的访问路径，应该就知道，我这是属于 【】 部署的情况。那么在部署的时候，就有可能出现本文要说的这个问题 【vue 打包后 static 中图片路径不对的问题】所以，本文后续内容的前置条件就是部署。
vue服务器打包显示图片,vue-cli中打包图片路径错误的解决方法
weixin_29843603的博客
08-09 1931
我们在项目打包的过程中，可能经常会遇到图片路径错误的问题，下面请大家随爱站技术频道小编一起来了解vue-cli中打包图片路径错误的解决方法吧！最近第一次使用vue-cli构建项目，第一次打包部署到服务器上的时候出现图片加载不出来，结合网上的方法，终于给摸索出来。将项目部署到服务器上分为两种：一种是直接部署到服务器的根目录，另外一种是部署到服务器的子目录下1.我们首先来说部署到根目录下 就是比如：w...
解决vue项目打包后背景图片路径错误问题
qq_41512822的博客
01-19 1337
今天打包vue项目上线后，发现背景图片未加载出来，其他图片加载正常，那个未加载出来的背景图片是在css文件中引入的，调试时发现图片的路径不对，改了build文件夹下utils.js文件，然后背景图片就能正常加载了。 打开build/utils.js，添加一行代码： publicPath: '../../', 背景图片在生产环境路径错误的原因： 构建后的项目, 都需要读取静态资源，静态资源分为三...
vue打包后图片的路径不对
qq_38557281的博客
03-08 591
图片的地址错误。 解决方法： 在build文件夹中的utils.js加入代码publicPath:'../../',
vue项目打包后出现图片引用路径错误的问题
weixin_45016440的博客
08-10 1095
根据‘build/webpack.base.conf.js’与‘config/index.js’对应关系，可知大于10000B的图片被打包到了‘static/img’目录，所以引用路径就变成了‘static/img/+文件名’。修改‘config/index.js’下assetsPublicPath的‘/’为‘./’，在‘build/utils.js’中ExtractTextPlugin.extract下添加‘publicPath: '../../'’
vue-cli中打包图片路径错误
丽丽大神ing的博客
09-24 435
查看此处
Web前端最全vue 打包后 static 中图片路径不对的问题，前端view绘制流程面试
2401_84616533的博客
05-08 841
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】与此同时呢，由于我们在 css 中使用了相对路径来引入图片。那么，打包后，我们的 css 会抽离出来为一个单独的 css 文件，这个时候， css 和 图片 之间的一个相对路径关系就改变了。为了解决这个问题，我们需要在中，增加一个pablicPath的配置，示例代码如下：publicPath: ‘…/…/’ // 作用是设置打包过程中提取css的方法})} else {这个时候，就解决了打包后图片路径404的问题了。
vue-cli 4.0 打包后图片报错
mygoes
07-27 935
vue-cli 4.0 打包后图片报错BUGvue 项目完成后，在本地运行静态资源加载无异常，打包到服务器后，报错404，提示图片加载失败分析比较可知，打包后，我的图片地址中少了`/syt/dist`解决解决问题的关键在 `publicPath: '/syt/dist/'` 这句代码小结 BUG vue 项目完成后，在本地运行静态资源加载无异常，打包到服务器后，报错404，提示图片加载失败 分析 已确定（对比后端静态资源目录结构）： 图片请求地址错误（地址对应的地方无图片） 我的（错误）地址：ht
齐枭飞 Vue系列--vue的图片路径，和背景图片路径打包后错误解决
一个来自外太空的游客
09-19 480
老实的按照官网提供的，搭建的了 webpack+vue+vuex+vue-router，，因为是自己搭建的，所以踩了不少坑，一般问题百度都有，这个背景图片的问题，查了很久才解决。 1、找到 config->index.js里面，如下修改 2、找到 build->utils.js,在里面加入一句publicPath:’…/…/’, [图片上传中…(image-7129b4-152301...
vue2本地图片路径错误
最新发布
12-31
### 解决Vue2项目中本地图片路径配置错误 对于Vue2项目中的本地图片路径配置错误，通常可以通过调整`vue.config.js`文件以及合理设置静态资源路径来解决问题。 当遇到图片无法正常加载的情况时，可以考虑将图片...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值