Img标签的src地址自动拼接本地域名(localhost:8080)导致图片不显示问题

摘要:做Vue+element ui项目的时候,发现使用element ui的upload上传图片时,不显示的问题。我项目的图片是上传到七牛云,长传成功后返回存储在七牛云中的地址。后面发现是因为返回的地址是外部地址,需要完整的URL,不然会被视为本地的绝对路径.解决方法是在链接前面加上 http:// ,可直接选择在后端处理拼接,减小前端修改代码次数。

1.问题描述

前端代码:

<el-uploadclass="avatar-uploader"name="img":action="uploadURL":headers="MyHeader":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><img   v-if="userInfoObj.avatar" :src="userInfoObj.avatar"  :onerror="$store.state.errorImg" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i><div slot="tip" class="el-upload__tip">点击上传头像,只能上传jpg/png文件,且不超过1mb</div>
</el-upload>

前端请求示例:

只上传一张图片。

后端返回结果:

将data中的链接直接用浏览器访问是可以查看到图片。但项目页面图片不显示,如下图:

对页面元素进行检查,发现好像地址没问题:

可为啥就是访问不了呢,接下来直接复制没显示图片的地址,看它是否有问题,选中未显示图片,鼠标右键复制图片地址。

图片地址:

注意看,发现图片真正请求时竟然加上了本地域名localhost, 难怪访问不到图片,图片url被错误拼接了。

2.解决方法

因为返回的地址是外部地址,需要完整的URL,不然会被视为本地的绝对路径.

解决方法是在链接前面加上 http:// ,可直接选择在后端处理拼接,减小前端修改代码次数。

方法1:前端访问时,img src属性加上http//

方法2:后端地址拼接上http://后返回给前端,img src直接使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/68752.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

spring @value 注入static 注入静态变量方法

对于spring static变量 下面给大家介绍spring不能注入static变量的原因&#xff0c;具体详情如下所示&#xff1a; Spring 依赖注入 是依赖 set方法 set方法是 是普通的对象方法 static变量是类的属性 只能在setAppId方法上加注解&#xff0c;另外class需要加 Component等…

【菜鸡学艺–Vue2–001】模板语法声明式渲染

【菜鸡学艺–Vue2–001】模板语法&声明式渲染 &#x1f996;我是Sam9029&#xff0c;一个前端 Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主 **&#x1f431;‍&#x1f409;&#x1f431;‍&#x1f409;恭喜你&#xff0c;若此文你认为写…

Android大厂需要刷的(999道)面试题

想必大家都在为今年的金九银十做准备&#xff0c;今年也是最为艰难的一年。作为程序员从未感觉到如此艰难&#xff0c;身边不是被辞退就是找不到工作。先不说2023年应届生毕业即失业&#xff0c;作为开发15年的老Android程序员&#xff0c;现在也在和300个人挣一个岗位。 肉少…

使用Dbeaver连接GaussDB

1.下载DBeaver&#xff0c;官网地址 2.安装软件&#xff0c;打开软件&#xff0c;点击数据库->驱动管理器&#xff0c;具体操作如下图&#xff1a; 3、选择新建后进行参数设置&#xff0c;如下图&#xff1a; 具体参数如下图 驱动名称: GS #随便定义 驱动类型&#…

Docker-安装(Linux,Windows)

目录 前言安装版本Docker版本说明前提条件Linux安装使用YUM源部署获取阿里云开源镜像站YUM源文件安装Docker-ce配置Docker Daemon启动文件启动Docker服务并查看已安装版本 使用二进制文件部署 Windows安装实现原理安装步骤基本使用 参考说明 前言 本文主要说明Docker及其相关组…

如何使用代理配置快速定位接口测试脚本问题?

在调试接口用例过程中&#xff0c;如果响应结果和预期结果不一致&#xff0c;则需要检查请求信息。通过代理获取自动化测试中的请求响应信息&#xff0c;对比与正常请求响应的区别&#xff0c;就能够更直观的排查请求错误&#xff0c;相当于编写代码时的 debug 功能。 实战练习…

软件上线测评报告怎么做?

软件上线测试 软件上线前必须经过一个整体的测评&#xff0c;从而帮助企业了解软件的运行情况。软件上线测评检测报告&#xff08;软件产品测试报告&#xff09;也通常被称为&#xff1a;科技项目验收测试报告、&#xff08;软件类&#xff09;科技成果鉴定测试、软件检测报告…

互联网摸鱼日报(2023-09-04)

互联网摸鱼日报(2023-09-04) 36氪新闻 腾讯游戏的棋中妙手 逐一解读北交所8大改革组合拳 本周双碳大事&#xff1a;全国碳市场清缴履约工作全面展开&#xff1b;宁德时代在成都成立新能源研究院&#xff1b;我国首个万吨级光伏发电直接制绿氢项目投产 你在上海 city walk&a…

cron介绍

cron表达式在线生成 在使用定时调度任务的时候&#xff0c;我们最常用的&#xff0c;就是cron表达式了。通过cron表达式来指定任务在某个时间点或者周期性的执行。 cron表达式的组成 cron表达式是一个字符串&#xff0c;由6到7个字段组成&#xff0c;用空格分隔。其中前6个字…

【无标题CAdUiPaletteSet】

#pragma once #include "TunnelSectionPalette.h"class CTunnelSectionPaletteSet : public CAdUiPaletteSet {DECLARE_DYNAMIC(CTunnelSectionPaletteSet)public:

Kotlin return 和 loop jump

再聊 return 在上一篇文章《Kotlin inline、noinline、crossinline 深入解析》 我们介绍到,在 lambda 中不能使用 return,除非该函数是 inline 的。如果该高阶函数是 inline ,调用该函数时,在传入的 lambda 中使用 return,则 return 的是离它最近的 enclosing function,…

解决uniapp下拉框 内容被覆盖的问题

1. 下拉框 内容被覆盖的问题 场景: 现在是下拉框被表格覆盖了 解决办法: 在表格上添加css 样式来解决这个问题 .add-table{display: static;overflow: visible; } display: static: 将元素会按照默认的布局方式进行显示&#xff0c;不会分为块状或行内元素。 overflow: vi…

NAT地址转换,路由器作为出口设备,实现负载分担

路漫漫其修远兮&#xff0c;吾将上下而求索 一个善于创造的人&#xff0c;一定是一个善于分享的人。 今天整理了一个实验&#xff0c;具备NAT地址转换&#xff0c;路由器作为出口设备&#xff0c;实现负载分担&#xff0c;实现路由策略 目录 实验图 实验要求 实验配置 基…

Linux--I/O复用之select

目录 一&#xff1a;概念 二&#xff1a;使用 三&#xff1a;参数介绍&#xff1a; 1.ndfs&#xff1a; 2.fd_set类型&#xff1a; 3.readfds&#xff1a; 4.writefds&#xff1a; 5.exceptfds&#xff1a; 6.timeout&#xff1a; 7.返回值&#xff1a; 四&#xff1…

Android FileObserver 的使用与简要原理

FileObserver 是一个 Android 类&#xff0c;用于监视指定文件或目录的更改。它可以帮助开发者实时检测文件或目录的创建、删除、重命名、修改等操作。通过使用 FileObserver&#xff0c;开发者可以及时响应这些文件系统变化&#xff0c;并在相应的事件发生时执行特定的操作。 …

爬虫的工作原理、挑战和应用

什么是网络爬虫&#xff1f; 网络爬虫&#xff08;Web Crawler&#xff09;是一种自动化程序&#xff0c;它能够在互联网上浏览网页、收集信息并将其存储在本地或其他地方供进一步处理和分析。爬虫通常用于搜索引擎、数据挖掘、内容聚合、价格比较等应用中。 爬虫的工作原理&…

2023年7月京东投影仪行业品牌销售排行榜(京东大数据)

鲸参谋监测的京东平台7月份投影仪行业销售数据已出炉&#xff01; 7月份&#xff0c;投影仪市场呈现增长趋势。根据鲸参谋平台的数据可知&#xff0c;7月京东平台投影仪的销量将近20万&#xff0c;同比增长约16%&#xff1b;销售额将近3.8亿&#xff0c;同比增长约4%。 ​*数据…

django.core.exceptions.AppRegistryNotReady: Apps aren‘t loaded yet.

运行django测试用例报错django.core.exceptions.AppRegistryNotReady: Apps arent loaded yet. 解决&#xff1a;在测试文件上方加上 django.setup() django.setup()是Django框架中的一个函数。它用于在非Django环境下使用Django的各种功能、模型和设置。 在常规的Django应用…

Tequila Works x Incredibuild

关于 Tequila Works Tequila Works 是一家位于西班牙马德里的电子游戏开发商&#xff0c;由劳尔鲁比奥 (Raul Rubio) 和卢兹桑乔 (Luz Sancho) 于2009年创立。该公司著名的游戏产品包括《死亡曙光》(Deadlight)、《霜华》(Rime)、《联盟外传&#xff1a;努努之歌》(Song of Nu…

springboot项目打包优化,将所有第三方包单独打包至lib目录

在pom.xml中配置以下代码&#xff0c;随后使用mvnw clean package打包 <build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><configuration><!-- 主…