“vue项目部署到正式环境中图片网址自动拼接nginx转发的网址“的解决

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

#vue

博客内容讲述了在项目开发中遇到的一个前端图片无法正常回显的问题，原因是数据库存储的图片URL缺少了一个斜杠，导致前端无法正确加载。作者通过在前端代码中自动拼接nginx转发的网址解决了这个问题，确保了图片的正常显示。

做项目的时候,数据库也有上传的图片地址,但是在前端回显的时候显示不出来.如图:

回显的代码:<img :src="declarationForm.pics[0].url" class="avatar" alt="">

后端返回的地址是

才发现地址少了个/,导致图片不能回显,所以在src显示的时候自动拼接nginx转发的网址

Lemon_Han酱
关注
Jenkins自动化运维-打包部署Vue前端项目(3): Pipeline脚本编写
飞鸽FlyGo-把自己作为一款产品来打磨，提升产品的体验，锻造出最好的自己。
05-25 3448
Jenkins自动化运维-打包部署Vue前端项目(3): Pipeline脚本编写。 拉取Git代码、npm构建打包、上传部署到目标服务器。
Jenkins自动化运维-打包部署Vue前端项目(2):Jenkins配置Web前端打包任务
飞鸽FlyGo-把自己作为一款产品来打磨，提升产品的体验，锻造出最好的自己。
05-24 1497
Jenkins自动化运维-打包部署Vue前端项目(2):Jenkins配置Web前端打包任务。配置Job任务
关于Vue项目部署服务器遇到的一些接口问题
SeverusYang的博客
10-24 597
服务器部署的是宝塔面板。后端开发人员没有配置Cors的大前提下，可以参考该文档。如果直接使用nginx就在nginx.conf文件配置下更改（应该是...目前还没改过）那么首先引入一个概念，
项目中的图片路径为什么自动拼上了域名端口
NOyesNONO_的博客
06-07 2891
背景：前端的dist包在后端的resource/static里 这里的src路径，是由后端返回的值，是以sys开头的地址，在控制台中发现，自动补全了前边的http://域名/(项目名/)，并且直接点击连接是可以访问的 经查询：有网友说是：src的连接若不是http, https, ftp…等开头的都会被判断为相对路径，实际导向时就会被加上http://域名/(项目名/)另外，如果想用绝对路径，需要在路径前加上，如file:///D:/…其他网友问的这个问题里边有这个答案...
Vue项目本地运行正常，打包上传到服务器后请求地址404问题
北枫林
04-21 9032
问题解决： 把nginx里的配置里的 proxy_pass http://127.0.0.1:8080; 改成proxy_pass http://127.0.0.1:8080/; 多加一个斜杠。 问题分析： Vue项目打包完之后接口请求不到后端出现404错误，这是由于Vue项目打包之后 proxyTable代理配置失效了。 由于Vue项目打包之后代理失败，那么就需要使用Nginx进行反向代理请求了，可是还是出现404错误。在nginx中配置proxy_pass反向代理时，当在后面的url加上了 “/
django本地服务器部署_VUE本地运行正常，服务器部署竟然出现这种问题
weixin_39826080的博客
11-20 457
环境：nginx服务器 框架：VUE过五关，斩六将，项目终于开发完了打包，部署，测试哎哎哎~~，什么情况，页面刷新404问题描述：vue项目在本地时运行正常，但部署到服务器中，登录成功之后刷新页面，出现404错误问题原因：这是由于VUE框架中vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新...
网页骨架屏自动生成方案（dps）
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
09-09 687
来源：花满楼https://zhuanlan.zhihu.com/p/74403911什么是骨架屏？什么是骨架屏呢？骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给...
vue(vue-cli+vue-router)+babel+webpack项目搭建入门（四）上线部署
大菜鸟的博客
03-17 1070
vue(vue-cli+vue-router)+babel+webpack项目搭建入门&amp;amp;amp;amp;amp;lt;四&amp;amp;amp;amp;amp;gt; 本系列文章将介绍基于vue+webpack的前端项目的构建过程。文章分为四章内容，第一章介绍开发环境的部署，第二章介绍项目的构建，第三章以一个登陆-主界面的纯前端为示例进行实战开发，第四章介绍项目打包部署以及部署上线时可能遇到的问题。本系列文章主要介绍项目构建的流程，旨在为不了解现代前端项目开...
spring boot + vue +nginx实现前后端分离
qq_25598453的博客
06-08 1133
1. 创建spring boot 后端项目 暂不编写，百度有很多教程 2. 创建vue 前端项目 暂不编写，百度有很多教程 3. spring boot 打包并部署到服务器 3.1 将项目设置为jar包 打开项目的pom.xml文件 打包代码，进入项目的主目录，打开命令行，执行以下代码 mvn clean && mvn package 进入target目录，复制项目名-版本号.jar到服务器指定目录下。执行以下代码启动（注：jar包的名称可以任意修改。） java -jar 项目名-版本
ssh2-sftp-client实现前端项目自动部署
每天都要努力学习哦~~
10-18 2073
exec():要在命令行执行的完整命令:可选参数，JSON对象async: 异步执行.如果你提供了回调方法，这个值就一定为true，无论你怎么设置silent:打印信息不输出到命令控制台Node.js 的方法的其他参数都可以用:当进程终止时调用，并带上输出。返回值： 同步模式下，将返回一个ShellString（shelljs v0.6.xf返回一个形如{ code:..., stdout:... , stderr:... }的对象）；
Img标签的src地址自动拼接本地域名（localhost:8080）导致图片不显示问题
yue200403的博客
09-01 5863
Img标签的src地址自动拼接本地域名（localhost:8080）导致图片不显示问题
vue中关于img src写入本地地址自动加入http://localhost:8080的解决方法
m0_46589413的博客
03-06 3483
img src写入本地地址自动加入http://localhost:8080问题
vue项目上线nginx服务器时的代理问题
luo1914_的博客
04-15 752
今天就来谈谈vue项目上线nginx服务器时我踩过的坑，希望大家看完可以少走弯路！！！ 1.首先，我们在本地开发的时候，假如我们的项目用到别人的接口，但是请求跨域了，那我们就需要使用代理，而在vue的配置文件vue.config.js中，我们写的接口代理有两种模式，如下： module.exports = { devServer: { proxy: { "/info...
vue项目部署服务器跨域处理（nginx）
Frank杰的博客
08-19 2712
前言 最近在做项目时候遇到了这个问题，网上找到的资料虽然详细但有些地方没提到，花费了一天的时间发现了我自己的问题，在这记录一下。我用的服务是NGINX，apache的没有再去测试。 正文 vue项目打包好后扔到服务器上，然后惊奇的发现在本地完美运行的连接到的后端接口一个也没有成功获取到数据，检查了无数次代码又百度好久之后才知道是本地运行时node已经帮我们实现了跨域，而在服务器中跨域需要重新配置。 不再说废话了，接下来的说一下我的处理方法： 首先进入nginx的目录文件夹->conf->ngin
从后端拿到图片地址，前端拼接基本路径却不显示图片，
m0_58762936的博客
12-13 941
这个图片进入页面必定没有加载出来，点击刷新可能会出来，也可能不会出来。
nginx反向代理-解决前端跨域问题
diankaoli4837的博客
02-13 525
1.定义 跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。理解这一点很重要！！！ 2.跨域访问示例 假设有两个网站，A网站部署在：http://localhost:81 即本地ip端口81上；B网站部署在：http:/...
vue项目 域名和端口拼接图片链接实例
weixin_46337813的博客
02-24 875
if (item.sysUserAvatar) { item.sysUserAvatar = process.env.VUE_APP_BASE_API + item.sysUserAvatar; }
Nginx反向代理解决Vue跨域问题
StoNENee的博客
04-04 7888
Nginx反向代理解决Vue跨域问题
将前端vue项目部署到nginx中，vue中publicPath自动拼接一个路径
cjy1575944940的博客
08-22 5003
将原本部署在tomcat中的vue项目改成部署在nginx中。强调了vue.config.js里的publicPath对nginx配置的影响，修改访问路径后vue配置以及nginx配置都需要修改
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值