当前位置: 首页 > news >正文

前端小案例-图片存放在远端服务器

前端小案例-图片存放在远端服务器

项目背景:

一个智能产业园的小程序由于可以控制很多种设备,可能有灯、空调、窗帘等智能设备。

现在面临以下问题:

  1. 需要存放很多设备的图标。
  2. 设备的图标可能会进行修改。

为了解决上面的问题,我们可以将设备的图标保存在远端的服务器。从服务器请求图片到本地进行渲染。

但是这样可能会导致一个新的问题就是如果服务器挂了,小城序的图标就不能够使用了。对此我们的对策是当服务器获取不到图片的时候就使用本地的某张备用照片。

根据上述背景整理出下列案例

案例1

遍历一个设备数组,每个元素li标签里的img需要放一张与元素相关的图片,如果请求服务器没有该地址的图片,或者服务器挂了,则应该使用本地的图片。这应该如何实现呢

在React中,你可以使用数组的map方法来遍历设备数组,并为每个设备渲染相应的<li>元素。对于每个<li>元素中的图片,你可以使用之前提到的逻辑来加载服务器图片并备用本地图片。

以下是一个示例代码,展示了如何在React中实现遍历设备数组并加载相关图片的逻辑:

import React from 'react';const DeviceList = ({ devices }) => {return (<ul>{devices.map((device) => (<li key={device.id}><imgsrc={device.serverImagePath}alt="Device Image"onError={(e) => {e.target.src = require('./defaultImg.png');}}/><span>{device.name}</span></li>))}</ul>);
}export default DeviceList;

在上面的代码中,DeviceList组件接受devices作为属性,它是设备数组。map方法用于遍历设备数组,并为每个设备渲染一个<li>元素。其中,src属性被设置为设备的服务器图片路径。如果加载失败,则会触发onError事件处理程序,利用require 导入设置为图片的src属性,从而显示备用的本地图片。这里使用了内联的箭头函数来为每个<img>元素定义事件处理程序。

你可以在父组件中使用DeviceList并传递设备数组:

import React from 'react';
import DeviceList from './DeviceList';function App() {const devices = [{ id: 1, name: 'Device 1', serverImagePath: '服务器图片路径1'},{ id: 2, name: 'Device 2', serverImagePath: '服务器图片路径2'},// 其他设备];return (<div><DeviceList devices={devices} /></div>);
}export default App;

确保将每个设备对象中的"服务器图片路径"替换为实际的服务器图片路径,将"本地图片路径"替换为实际的本地图片路径。

这样,对于每个设备,会根据服务器图片路径加载图片,如果加载失败,则会显示备用的本地图片。

相关文章:

前端小案例-图片存放在远端服务器

前端小案例-图片存放在远端服务器 项目背景&#xff1a; 一个智能产业园的小程序由于可以控制很多种设备&#xff0c;可能有灯、空调、窗帘等智能设备。 现在面临以下问题&#xff1a; 需要存放很多设备的图标。设备的图标可能会进行修改。 为了解决上面的问题&#xff0c…...

【鼠标右键菜单添加用VSCode打开文件或文件夹】

鼠标右键菜单添加用VSCode打开文件或文件夹 演示效果如下&#xff1a; 右击文件 或右击文件夹 或在文件夹内空白处右击 方法一&#xff1a;重装软件 重装软件&#xff0c;安装时勾选如图所示方框&#xff08;如果登录的有账号保存有配置信息可以选择重装软件&#xff0c…...

【jvm--堆】

文章目录 1. 堆&#xff08;Heap&#xff09;的核心概述2. 图解对象分配过程2.1 Minor GC&#xff0c;MajorGC、Full GC2.1 堆空间分代思想2.3 内存分配策略2.4 TLAB&#xff08;Thread Local Allocation Buffer&#xff09;2.5 堆空间的参数设置2.6 逃逸分析2.7 逃逸分析&…...

【数据库——MySQL(实战项目1)】(1)图书借阅系统

目录 1. 简述2. 功能3. 数据库结构设计3.1 绘制 E-R 图3.2 创建数据库3.3 创建表3.4 插入表数据 1. 简述 经过前期的学习&#xff0c;我们已经掌握数据库基础操作&#xff0c;因此是时候来做一个实战项目了——图书借阅系统。对于图书借阅系统&#xff0c;相信大家不难想到至少…...

[GXYCTF 2019]Ping Ping Ping题目解析

本题考察的内容是rce绕过&#xff0c;本事过滤的东西不算多也算是比较好绕过 基础看到这种先ping一下试试看 输入127.0.0.1看看有啥东西 有回显说明可以接着往下做 借用RCE漏洞详解及绕过总结(全面)-CSDN博客这个大佬整理的rce绕过 ;A;B无论真假&#xff0c;A与B都执行&…...

HTTP协议的请求协议和响应协议的组成,HTTP常见的状态信息

HTTP协议 什么是协议 协议实际上是某些人或组织提前制定好的一套规范,大家只要都按照这个规范来就可以做到沟通无障碍 HTTP协议是W3C(万维网联盟组织)制定的一种超文本传输通信协议(发送消息的模板和数据的格式),除了传送字符串,还有声音、视频、图片等流媒体等超文本信息 …...

【LeetCode】剑指 Offer Ⅱ 第6章:栈(6道题) -- Java Version

题库链接&#xff1a;https://leetcode.cn/problem-list/e8X3pBZi/ 类型题目解决方案栈的应用剑指 Offer II 036. 后缀表达式模拟 栈 ⭐剑指 Offer II 037. 小行星碰撞分类讨论 栈 ⭐单调栈剑指 Offer II 038. 每日温度单调栈 ⭐剑指 Offer II 039. 直方图最大矩形面积单调栈…...

vue3的element-plus的el-dialog的样式修改无效问题

问题描述 想要修改element-plus的对话框el-dialog中的样式&#xff0c;发现在页面style的scoped属性下&#xff0c;使用:deep深入选择器进行修改是无效的。&#xff08;vue2下深度选择器是有效的&#xff09; //无效 :deep(.el-dialog){background-color: transparent; }解决…...

归纳所猜半结论推出完整结论:CF1592F1

https://www.luogu.com.cn/problem/CF1592F1 场上猜了个结论&#xff0c;感觉只会操作1。然后被样例1hack了。然后就猜如果 ( n , m ) (n,m) (n,m) 为1则翻转4操作&#xff0c;被#14hack了。然后就猜4操作只会进行一次&#xff0c;然后就不知道怎么做下去了。 上面猜的结论都…...

WPFdatagrid结合comboBox

在WPF的DataGrid中希望结合使用ComboBox下拉框&#xff0c;达到下拉选择绑定的效果&#xff0c;在实现的过程中&#xff0c;遇到了一些奇怪的问题&#xff0c;因此记录下来。 网上能够查询到的解决方案&#xff1a; 总共有三种ItemSource常见绑定实现方式&#xff1a; 1.ItemS…...

Markdown类图之继承、实现、关联、依赖、组合、聚合总结(十五)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…...

@MultipartConfig注解

前言&#xff1a; 在学习Javaweb的Servlet文件上传和下载的过程中&#xff0c;我们会遇到一个特殊的注解---MultipartConfig。 MultipartConfig的适用情况&#xff1a; 1.文件上传: 当您的应用程序需要接收用户上传的文件时&#xff0c;可以在相应的 Servlet 上使用 Multipart…...

Python并发编程简介

1、Python对并发编程的支持 多线程: threading, 利用CPU和IO可以同时执行的原理,让CPU不会干巴巴等待IO完成多进程: multiprocessing, 利用多核CPU的能力&#xff0c;真正的并行执行任务异步IO: asyncio,在单线程利用CPU和IO同时执行的原理&#xff0c;实现函数异步执行使用Lo…...

WebSocket介绍及部署

WebSocket是一种在单个TCP连接上进行全双工通信的协议&#xff0c;其设计的目的是在Web浏览器和Web服务器之间进行实时通信&#xff08;实时Web&#xff09;。 WebSocket协议的优点包括&#xff1a; 1. 更高效的网络利用率&#xff1a;与HTTP相比&#xff0c;WebSocket的握手…...

自动求导,计算图示意图及pytorch实现

pytorch实现 x1 torch.tensor(3.0, requires_gradTrue) y1 torch.tensor(2.0, requires_gradTrue) a x1 ** 2 b 3 * a c b * y1 c.backward() print(x1.grad) print(y1.grad) print(x1.grad 6 * x1 * y1) print(y1.grad 3 * (x1 ** 2))输出为&#xff1a; tensor(36.) …...

睿伴科创上线了

Robotutor睿伴&#xff0c;一个专业的青少儿编程科创教育品牌和科创服务平台。 Robotutor睿伴拥有一个超过5年的青少儿编程科创教育团队&#xff0c;积累了丰富的课程研发&#xff0c;教学服务和赛事辅导经验。并和上海多所知名高校、上海市计算机学会、上海青少年科学社等开展…...

域名抢注和域名注册

随着互联网的发展&#xff0c;域名已经成为了企业和个人在网络上展示自己的重要标志。如何获得一段好记、易拼写、有意义的域名&#xff0c;是很多人都面临的问题。本文将介绍域名抢注和域名注册的相关内容&#xff0c;并推荐ym.qqmu.com这个可靠的域名注册平台。 一、什么是域…...

【20】c++设计模式——>组合模式

组合模式定义 C组合模式&#xff08;Composite Pattern&#xff09;是一种结构型设计模式&#xff0c;他允许将对象组合成树形结构来表示“部分-整体”的层次结构&#xff1b;在组合模式中有两种基本类型的对象&#xff1a;叶子对象和组合对象&#xff0c;叶子对象时没有子对象…...

Jetpack:004-如何使用文本组件

文章目录 1. 概念介绍2. 使用方法2.1 通用参数2.2 专用参数 3. 示例代码4. 内容总结 我们在上一章回中介绍了Jetpack组件在布局中的对齐方式&#xff0c;本章回中主要介绍文 本组件的使用方法。闲话休提&#xff0c;让我们一起Talk Android Jetpack吧 1. 概念介绍 我们在本章…...

JVM(八股文)

目录 一、JVM简介 二、JVM中的内存区域划分 三、JVM加载 1.类加载 1.1 加载 1.2 验证 1.3 准备 1.4 解析 1.5 初始 1.6 总结 2.双亲委派模型 四、JVM 垃圾回收&#xff08;GC&#xff09; 1.确认垃圾 1.1 引用计数 1.2 可达性分析&#xff08;Java 采用的方案&a…...

Phi-3-mini-128k-instruct与智能车仿真:生成自然语言控制逻辑与调试报告

Phi-3-mini-128k-instruct与智能车仿真&#xff1a;生成自然语言控制逻辑与调试报告 最近在折腾一个智能车仿真项目&#xff0c;发现一个挺有意思的事儿&#xff1a;让AI来帮忙写控制逻辑和看报告&#xff0c;效率提升了不少。以前我们得手动把“绕过前面那个障碍物&#xff0…...

Java函数冷启动优化不是“选配”,而是SLA硬指标!一线大厂SRE团队正在紧急落地的6项Kubernetes调度增强策略

第一章&#xff1a;Java函数冷启动的本质与SLA倒逼机制Java函数冷启动并非单纯“首次加载慢”的表象&#xff0c;而是JVM生命周期、类加载机制、字节码验证、即时编译&#xff08;JIT&#xff09;预热及运行时元数据初始化等多层系统行为在无预热上下文下的集中爆发。当Serverl…...

nlp_structbert_sentence-similarity_chinese-large赋能微信小程序:实现文本查重功能

nlp_structbert_sentence-similarity_chinese-large赋能微信小程序&#xff1a;实现文本查重功能 最近和一位做在线教育的朋友聊天&#xff0c;他提到一个挺头疼的问题&#xff1a;批改学生作文时&#xff0c;经常发现不同学生提交的作业内容高度相似&#xff0c;甚至有大段雷…...

DAMOYOLO-S基础教程:理解count字段与实际业务中目标计数逻辑映射

DAMOYOLO-S基础教程&#xff1a;理解count字段与实际业务中目标计数逻辑映射 1. 从一次“数数”的困惑说起 前两天&#xff0c;一个做零售分析的朋友找我帮忙。他兴奋地告诉我&#xff0c;他们用上了最新的AI目标检测模型&#xff0c;想自动统计货架上的商品数量。他上传了一…...

如何用dashdot打造高颜值服务器监控面板?完整配置教程

如何用dashdot打造高颜值服务器监控面板&#xff1f;完整配置教程 【免费下载链接】dashdot A simple, modern server dashboard, primarily used by smaller private servers 项目地址: https://gitcode.com/gh_mirrors/da/dashdot dashdot是一款现代化的服务器监控面板…...

高效获取Sketchfab 3D资源:Firefox专属下载工具使用指南

高效获取Sketchfab 3D资源&#xff1a;Firefox专属下载工具使用指南 【免费下载链接】sketchfab sketchfab download userscipt for Tampermonkey by firefox only 项目地址: https://gitcode.com/gh_mirrors/sk/sketchfab 在3D设计与开发领域&#xff0c;获取高质量模型…...

Qwen3智能字幕系统效果展示:法庭庭审录音→高司法术语准确率字幕

Qwen3智能字幕系统效果展示&#xff1a;法庭庭审录音→高司法术语准确率字幕 1. 引言&#xff1a;当AI成为“数字书记员” 想象一下这样的场景&#xff1a;一场长达数小时的法庭庭审正在进行&#xff0c;书记员的手指在键盘上飞速敲击&#xff0c;试图跟上律师与证人间密集、…...

比迪丽模型在数据库课程设计中的应用:ER图可视化增强

比迪丽模型在数据库课程设计中的应用&#xff1a;ER图可视化增强 1. 引言 数据库课程设计是计算机专业学生的必修实践环节&#xff0c;其中ER图&#xff08;实体-关系图&#xff09;的设计与呈现是核心难点。传统工具绘制的ER图往往显得枯燥抽象&#xff0c;学生难以直观理解…...

超越矩阵SVD:T-SVD如何用傅里叶变换搞定三维数据补全?一个视频修复案例讲透

超越矩阵SVD&#xff1a;T-SVD如何用傅里叶变换搞定三维数据补全&#xff1f;一个视频修复案例讲透 当一段珍贵的历史视频出现帧丢失或噪声污染时&#xff0c;传统矩阵分解方法往往束手无策——它们将三维视频数据强行"压扁"成二维矩阵进行处理&#xff0c;破坏了时空…...

DeOldify图像上色服务快速上手:3步搭建个人老照片修复站

DeOldify图像上色服务快速上手&#xff1a;3步搭建个人老照片修复站 1. 为什么选择DeOldify图像上色服务 黑白老照片承载着珍贵的记忆&#xff0c;但随着时间的流逝&#xff0c;这些影像逐渐褪色。传统的手工上色方法不仅耗时耗力&#xff0c;而且成本高昂。现在&#xff0c;…...