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

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

项目背景:

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

现在面临以下问题:

  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;

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

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

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

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

相关文章

表达式转换

算术表达式有前缀表示法、中缀表示法和后缀表示法等形式。日常使用的算术表达式是采用中缀表示法&#xff0c;即二元运算符位于两个运算数中间。请设计程序将中缀表达式转换为后缀表达式。 输入格式: 输入在一行中给出不含空格的中缀表达式&#xff0c;可包含、-、*、/以及左右…

达梦错误码信息-PRO*C 错误码汇编

达梦错误码信息-PRO*C 错误码汇编 环境介绍 环境介绍 数据库版本环境:DM8.1-3-12-2023.04.17-187846-20040-ENT运行预编译命令行工具 dpc_new.exe 时&#xff0c;可能会就预编译过程中的一些错误进行报 错提示。错误码码值域如下&#xff1a;1&#xff09;dpc 警告错误码值域为…

【C++】笔试训练(四)

目录 一、选择题二、编程题1、计算糖果2、进制转换 一、选择题 1、有以下程序&#xff0c;程序运行后的输出结果是&#xff08;&#xff09; #include<iostream> #include<cstdio> using namespace std; int main() {int m 0123, n 123;printf("%o %o\n&…

【数据结构】栈和队列-- OJ

目录 一 用队列实现栈 二 用栈实现队列 三 设计循环队列 四 有效的括号 一 用队列实现栈 225. 用队列实现栈 - 力扣&#xff08;LeetCode&#xff09; typedef int QDataType; typedef struct QueueNode {struct QueueNode* next;QDataType data; }QNode;typedef struct …

IntelliJ IDEA失焦自动重启服务的解决方法

IDEA 热部署特性 热部署&#xff0c;即应用正属于运行状态时&#xff0c;我们对应用源码进行了修改更新&#xff0c;在不重新启动应用的情况下&#xff0c;可以能够自动的把更新的内容重新进行编译并部署到服务器上&#xff0c;使修改立即生效。 现象 在使用 IntelliJ IDEA运…

2023品牌新媒体矩阵营销洞察报告:流量内卷下,如何寻找增长新引擎?

近年来&#xff0c;随着移动互联网的发展渗透&#xff0c;短视频、直播的兴起&#xff0c;新消费/新零售、兴趣电商/社交电商等的驱动下&#xff0c;布局线上渠道已成为绝大多数品牌的必然选择。 2022年&#xff0c;越来越多的品牌加入到自运营、自播的行列中&#xff0c;并且从…

linux(全志F1C100S/F1C200S)系列10:参考

目录 一、1.基于F1C200s的掌上电脑项目-Kashine2.小白自制Linux开发板系列-墨云 二、1.2. 一、 1.基于F1C200s的掌上电脑项目-Kashine https://blog.csdn.net/qq_41709234/category_12158774.html 2.小白自制Linux开发板系列-墨云 https://www.cnblogs.com/twzy/ 二、 1.…

golang gin——controller 模型绑定与参数校验

controller 模型绑定与参数校验 gin框架提供了多种方法可以将请求体的内容绑定到对应struct上&#xff0c;并且提供了一些预置的参数校验 绑定方法 根据数据源和类型的不同&#xff0c;gin提供了不同的绑定方法 Bind, shouldBind: 从form表单中去绑定对象BindJSON, shouldB…

数组字符串方法

数组方法 concat()copyWithin()entries()every()fill()filter()find()findIndex()findLastIndex()flat()flatMap()forEach()from()includes()indexOf()isArray()join()keys()lastIndexOf()map()of()pop()push()reduce()reduceRight()reverse()shift()slice()some()sort()splic…

【ONE·C++ || 异常】

总言 主要介绍异常。 文章目录 总言1、C异常1.1、C语言传统的处理错误的方式1.2、异常概念1.3、异常的基本用法1.3.1、异常的抛出和捕获1.3.1.1、异常的抛出和匹配原则1.3.1.2、 在函数调用链中异常栈展开匹配原则 1.3.2、异常的重新抛出1.3.2.1、演示一1.3.2.2、演示二 1.3.3…

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

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

C++11 Qt QFutureWatcher lambda

目录 Lambda 介绍 【QT】Qt之QFutureWatcher 简述 传参&#xff1a; 还可以使用 QProgressDialog 作为阻堵 函数&#xff0c;变成同步&#xff1b; 完成后&#xff0c;关闭&#xff1b; MyQProgressDialog 效果&#xff1a; Lambda 介绍 Lambda 函数也叫匿名函数&…

VueRouter与expres/koa中间件的关联

ueRouter: runQueue 路由守卫都是有三个参数to,from,next。其中next就是下方的fn执行时候传入的第二个参数(回调函数)&#xff0c;只有该回调执行后才会挨个遍历queue内的守卫。 中间件的作用 隔离基础设施与业务逻辑之间的细节。详细的内容位于《深入浅出Node.js》P210 另外一…

mysql面试题30:什么是数据库连接池、应用程序和数据库建立连接的过程、为什么需要数据库连接池、你知道哪些数据库连接池

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:什么是数据库连接池? 数据库连接池是一种用于管理和复用数据库连接的技术。它是在应用程序和数据库之间建立一组数据库连接,并以池的形式存储起…

Excel 转为 PDF,PNG,HTML等文件

1.安装 Spire.XLS for Java,下载jar包 下载地址 2.引入方式一&#xff08;我这里这种方式一直无法引入&#xff0c;都是失败&#xff0c;所以用的方式二&#xff09; <repositories><repository><id>com.e-iceblue</id><name>e-iceblue</na…

正样本、负样本、ROC、AUC

正样本、负样本 正样本和负样本通常与二分类问题相关联 正样本&#xff1a; 与真值对应的目标类别来说该样本为正样本。 &#xff08;正样本是在二分类问题中我们要寻找的目标类别&#xff09; 负样本&#xff1a; 与真值不对应的其他所有目标类别来说该样本为负样本。&…

Oracle笔记-对ROWNUM的一次理解(简单分页)

此博文记录时间&#xff1a;2023-05-05&#xff0c;发到互联网上是2023-10-09 这个在分页里面用得比较多&#xff0c;在MySQL中&#xff0c;通常使用limit去操作&#xff0c;而去感觉比较简单&#xff0c;Oracle中无此关键字。 通过查阅资料后&#xff0c;要实现分页需要用到…

对于使用win32 API获取性能计数器的理解

微软提供了获取性能计数器的接口&#xff0c;如下 LSTATUS RegQueryValueExA([in] HKEY hKey,[in, optional] LPCSTR lpValueName,LPDWORD lpReserved,[out, optional] LPDWORD lpType,[out, optional] LPBYTE lpData,[in, out, optional] L…

dubbo协议与triple协议的对比

分别使用dubbo协议和triple协议&#xff0c;按照官方文档搭建Demo。 两个流程对比下来发现&#xff0c;dubbo协议搭建起来比较简单直接&#xff0c;定义好接口&#xff0c;实现类&#xff0c;然后启动provider和consumer就完事了。而triple协议则需要先定义proto文件 然后增加…

Visual Leak Detector内存泄漏检测机制源码剖析

VC常用功能开发汇总&#xff08;专栏文章列表&#xff0c;欢迎订阅&#xff0c;持续更新...&#xff09;https://blog.csdn.net/chenlycly/article/details/124272585C软件异常排查从入门到精通系列教程&#xff08;专栏文章列表&#xff0c;欢迎订阅&#xff0c;持续更新...&a…