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

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

项目背景:

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

现在面临以下问题:

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

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

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

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

案例1

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

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

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

js 复制代码
import React from 'react';

const DeviceList = ({ devices }) => {
  return (
    <ul>
      {devices.map((device) => (
        <li key={device.id}>
          <img
            src={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并传递设备数组:

js 复制代码
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;

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

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

相关推荐
程序员的世界你不懂27 分钟前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技29 分钟前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip37 分钟前
JavaScript二叉树相关概念
前端
鳄鱼杆1 小时前
服务器 | Docker应用开发与部署的实践以及阿里云镜像加速配置
服务器·阿里云·docker
羚羊角uou1 小时前
【Linux】命名管道
linux·运维·服务器
一朵梨花压海棠go1 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
曾经的三心草1 小时前
Python2-工具安装使用-anaconda-jupyter-PyCharm-Matplotlib
android·java·服务器
attitude.x2 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java2 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)2 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5