uniapp请求图片时候发现提示GET http://localhost:xxxx/undefined 401,undefined:1解决办法【伸手党福利】

news2024/12/23 14:36:07

同理解决问题:所有请求发起完成之后执行业务逻辑

目录

    • 现象
    • 原因
    • 解决办法
      • 方法1:提前给变量一个非空默认值
      • 方法2:使用前端图片代替后端
      • 方法3:使用异步加载判断:
      • 注意:这种直接在页面判断内容是否为空或者undefined的方法无效:

现象

uniapp在加载的时候时长发现要动态加载图片,这些图片在加载过程中,会报GET http://localhost:6061/undefined 401 undefined:1,但是页面正常加载成功了。
在这里插入图片描述

原因

页面在请求后端回复加载前,地址变量默认是空的或者undefined,但是页面在加载过程中,已经分配好了变量。导致图片位置变成了向后端的请求。

解决办法

方法1:提前给变量一个非空默认值

方法2:使用前端图片代替后端

方法3:使用异步加载判断:

<template>
<view v-if="show">
			<view class="" style="width: 100%;" v-if="pics1.length!=0">
				<image :src="BaseUrl+'/'+pics1[0]" mode="widthFix" style="width: 100%;background-color: aliceblue;"></image>
			</view>
</view>
</template>
export default {
		data() {
			return {
				show: false,
				}
			}
		}
		methods: {
		getIndexs() {
				this.show = false
				let httpno = 0
				//10秒没有加载成功则刷新
				setTimeout(()=>{
					if(httpno != 3){
						this.$router.go(0);
					}
				},10000)
				
				//第一次加载图片
				let tmp = {
					imageName: 'index111',
				}
				// console.log();
				this.$http.get('/aaImageMenage/aaImageMenage/list', {
						params: tmp
					})
					.then(res => {
					//加载数+1
						httpno += 1
						console.log(httpno);
						if (httpno == 3) {
							this.show = true
						}
						//业务逻辑----------------------
						console.log(res.data.result);
						if (res.data.success == true) {
							//请输入业务逻辑
							this.pics1 = res.data.result.records[0].imageUrl.split(',')
							for (let i = 0; i < this.pics1.length; i++) {
								console.log(this.BaseUrl + '/' + this.pics1[i])
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: '您填写的参数有误,请查证后再提交!',
								duration: 2000
							})
						}
						//业务逻辑end----------------------
					}).catch(err => {
						uni.showToast({
							icon: 'none',
							title: '发起失败,请联系管理员!',
							duration: 2000
						})
						console.log(err);
					})


				//第二次加载图片
				tmp = {
					imageName: 'index112',
				}
				// console.log();
				this.$http.get('/aaImageMenage/aaImageMenage/list', {
						params: tmp
					})
					.then(res => {
					//加载数量+1
						httpno += 1
						console.log(httpno);
						if (httpno == 3) {
							this.show = true
						}
						//业务逻辑----------------------
						this.$tools.console1(res)
						console.log(res.data.result);
						if (res.data.success == true) {
							//请输入业务逻辑
							this.pics2 = res.data.result.records[0].imageUrl.split(',')
							this.pics2_2 = this.pics2.splice(1, this.pics2.length - 1)
							console.log("this.pics2_2");
							// console.log(this.pics2_2);
						} else {
							uni.showToast({
								icon: 'none',
								title: '您填写的参数有误,请查证后再提交!',
								duration: 2000
							})
						}
						//业务逻辑end----------------------
					}).catch(err => {
						uni.showToast({
							icon: 'none',
							title: '发起失败,请联系管理员!',
							duration: 2000
						})
						console.log(err);
					})
				//加载第3个图片
				tmp = {
					imageName: 'index113',
				}
				// console.log();
				this.$http.get('/aaImageMenage/aaImageMenage/list', {
						params: tmp
					})
					.then(res => {
					//图片加载成功数量+1
						httpno += 1
						console.log(httpno);
						if (httpno == 3) {
							this.show = true
						}
						//业务逻辑----------------------
						console.log(res.data.result);
						if (res.data.success == true) {
							//请输入业务逻辑
							this.notice = res.data.result.records[0].imageDetail
							// this.pics3 = res.data.result.records[0].imageUrl.split(',')
						} else {
							uni.showToast({
								icon: 'none',
								title: '您填写的参数有误,请查证后再提交!',
								duration: 2000
							})
						}
						//业务逻辑end----------------------
					}).catch(err => {
						uni.showToast({
							icon: 'none',
							title: '发起失败,请联系管理员!',
							duration: 2000
						})
						console.log(err);
					})

			},
		}

注意:这种直接在页面判断内容是否为空或者undefined的方法无效:

//无效方法:
<image :src="BaseUrl+'/'+pics1[0]" mode="widthFix" style="width: 100%;background-color: aliceblue;"></image>

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

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

相关文章

Java JVM基础入门(一):jvm的组成、串池、常量池、常用程序调优参数

JVM JVM是java的虚拟机&#xff0c;java的运行环境&#xff08;java二进制字节码的运行环境&#xff09; 好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收功能 JDK、JRE、JVM的关系图 常见的JVM&#xff1a; oracle的Hotspot是我们通常使…

矿山电子封条智能监管算法 yolov8

矿山电子封条智能监管系统通过YOLOv8python网络模型技术&#xff0c;矿山电子封条智能监管算法模型在对矿井人数变化、生产作业状态、出入井人员等情况实时监测分析&#xff0c;发现煤矿人员作业及状态异常动态及时告警&#xff0c;自动将报警信息推送给后台。YOLOv8 算法的核心…

k8s部署ingress-nginx步骤

目录 一、ingress简介 二、部署ingress controller、ingress-service 三、创建对外服务deployment和service 四、创建HTTP代理yaml 五、测试 六、公网域名测试 七、参考博客 一、ingress简介 service的作用体现在两个方面&#xff0c;对集群内部&#xff0c;它不断跟踪…

[计算机图形学]光线追踪的基本原理(前瞻预习/复习回顾)

一、光栅化的弊端 我们为什么要用光线追踪呢&#xff0c;在之前的篇章中&#xff0c;我们提到了&#xff0c;光栅化的方式很难表示一些全局的效果&#xff0c;如(1)软阴影&#xff0c;(2)Glossy的反射(类似镜子但又不像镜子那么光滑的材质&#xff0c;如打磨的铜镜和一些金属)&…

【GIT】git push后github没看到pull requests解决

当你在Github上push代码后&#xff0c;如果在远程仓库中没有看到pull request请求&#xff0c;那么有以下几种可能的原因&#xff1a; 未创建pull request 如果在本地使用git push命令将修改推送到Github上&#xff0c;但还没有在Github上创建pull request请求&#xff0c;则不…

FreeRTOS 队列(一)

文章目录 一、队列简介1. 数据存储2. 多任务访问3. 出队阻塞4. 入队阻塞5. 队列操作过程图示 二、队列结构体三、队列创建1. 函数原型&#xff08;1&#xff09;函数 xQueueCreate()&#xff08;2&#xff09;函数 xQueueCreateStatic()&#xff08;3&#xff09;函数 xQueueGe…

Golang每日一练(leetDay0045)

目录 133. 克隆图 Clone Graph &#x1f31f;&#x1f31f; 134. 加油站 Gas Station &#x1f31f;&#x1f31f; 135. 分发糖果 Candy &#x1f31f;&#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 …

【PR 基础】设置上下黑白边的两种方法

方法1 点击 文件-》新建-》旧版标题 点击确定 点击矩形工具 利用矩形工具框选出上下黑白边 款选完成后点击关闭 将刚创建的字幕拖入轨道 可以修改其持续时长与视频时长保持一致 如果想要修改字幕可以双击来修改 比如可以将颜色改为黑色 方法2 点击号&#xff0c;再选择安全边…

如何在表格里面使用VSTACK、HSTACK等函数

如何在表格里面使用VSTACK、HSTACK等函数 书接前文 ONLYOFFICE 桌面编辑器 v7.3 新功能介绍 里面介绍了最新版本的表格里面&#xff0c;添加的公式将帮助您更高效地进行数据计算&#xff1a;TEXTBEFORE、TEXTAFTER、TEXTSPLIT、VSTACK、HSTACK、TOROW、TOCOL、WRAPROWS、WRA…

IPSEC VPN

1.数据认证的介绍、作用、实现的技术手段 数据认证是指通过一系列验证过程检查数据的完整性、真实性、可靠性和准确性&#xff0c;以确保这些数据来自于已知或可信的来源。数据认证的目的是保护数据免受篡改、冒充或欺骗等威胁&#xff0c;确保数据的安全性和可信度。实现数据…

Windows 彻底卸载联软流氓软件(亲测可用)

文章目录 1、前言2、卸载步骤&#xff08;1&#xff09;打开服务&#xff0c;将所有Uni开头的服务都禁用&#xff0c;某些服务禁用后可能还是会自启&#xff0c;不过不影响&#xff08;2&#xff09;进入安全模式&#xff0c;电脑重启&#xff08;3&#xff09;重启后桌面显示了…

怎么将照片KB调小?压缩照片kb的几个方法

将照片KB调小的意思是将照片文件的大小缩小&#xff0c;使其占据更小的存储空间。在一些特定场景下&#xff0c;如网页设计、邮件发送、上传文件等&#xff0c;限制了文件大小&#xff0c;因此需要将照片压缩到规定大小以内。通常情况下&#xff0c;压缩后的照片质量会相应降低…

18.Java泛型

目录 1. Java基本介绍 2. JDK下载安装及其环境配置 3. 一个简单的java程序 4. Eclipse基本使用、数据类型、运算符 5. 控制语句&#xff08;if、switch、for、while、foreach&#xff09; 6. Java数组 7. Java字符串对象(String|StringBuffer|StringBuilder|StringJoiner…

关闭默认共享服务

目录 1.从网络上关闭共享协议2.禁用共享服务3.关闭防火墙共享端口4.脚本自启动删除默认共享5.修改注册表彻底屏蔽共享 共5种方法&#xff0c;推荐前三种搭配。 1.从网络上关闭共享协议 打开网络和共享中心->本地连接->属性把" Microsoft 网络的文件和打印机共享&qu…

Word如何插入图片?最全方法总结(2023新版)

案例&#xff1a;Word如何插入图片 【我最近在写毕业论文&#xff0c;需要在Word文档里添加一些图片&#xff0c;想问问大家Word如何插入图片呀&#xff1f;感谢回答&#xff01;】 Microsoft Word是一个广泛使用的文字处理软件&#xff0c;在使用中如果插入图片可以很好的丰…

优思学院|精益生产和六西格玛如何把控质量?

精益生产是一种流程改善方法&#xff0c;旨在最大程度地减少浪费和提高效率。在实施精益生产时&#xff0c;质量控制是一个重要的因素&#xff0c;因为不合格的产品会导致延误和浪费。优思学院在本文将探讨精益生产和六西格玛管理理论如何控制质量&#xff0c;以及解决产品质量…

poi-tl简介与文本/表格和图片渲染

一、poi-tl简介 下面简介来自官方文档。 官方文档&#xff1a;http://deepoove.com/poi-tl/#_why_poi_tl 1、简介 poi-tl&#xff08;poi template language&#xff09;是Word模板引擎&#xff0c;使用Word模板和数据创建很棒的Word文档。 poi-tl是一个基于Apache POI的Word模…

【Python】【进阶篇】5、Django Admin后台管理系统

目录 5、Django Admin后台管理系统1. 后台管理系统的重要性2. 了解Django后台管理功能 5、Django Admin后台管理系统 Django 的后台管理系统是非常出色的&#xff0c;新建项目以后&#xff0c;Django 就为我们设置好了后台管理系统的各种功能&#xff0c;本节我们将一起认识它…

SQLServer:Win/Linux环境安装及一键部署脚本

1. Win安装SQLServer CSDN已有完整安装流程&#xff0c;亲测可用。----》Windows安装SQLServer流程 2. Linux安装 SQLServer 2.1 设置镜像 curl https://packages.microsoft.com/config/rhel/7/mssql-server-2017.repo > /etc/yum.repos.d/mssql-server.repo 2.2 通过y…

Adobe国际认证证书有用吗?

Adobe国际认证又称为Adobe认证(英文:Adobe Certified Professional)是Adobe公司CEO签发的权威国际认证体系,旨在为用户提供Adobe软件的专业认证。 该体系基于Adobe核心技术及岗位实际应用操作能力的测评体系得到国际ISTE协会的认可&#xff0c;并在全球 148 各国家推广&#x…