Small front-end case - pictures stored in remote server

Small front-end case - pictures stored in remote server

Background of the project:

A small program in a smart industrial park can control many types of equipment, including lights, air conditioners, curtains and other smart equipment.

Now facing the following problems:

1. Need to store icons for many devices.
2. The device's icon may be modified.

In order to solve the above problem, we can save the device icon on the remote server. Request images from the server and render them locally.

But this may cause a new problem: if the server hangs up, the icon of Xiaochengxu cannot be used. Our solution to this problem is to use a local backup photo when the server cannot obtain the image.

Based on the above background, the following cases are compiled

Case 1

Traverse a device array, and each element in the tag needs to put a picture related to the element. If the requesting server does not have the address pictures, or the server is down, you should use local pictures. How should this be achievedliimg

In React, you can use the array's map method to iterate through the device array and render the corresponding <li> element for each device. For images in each <li> element, you can use the logic mentioned before to load the server image and fall back on the local image.

The following is a sample code that shows how to implement the logic of traversing the device array and loading related images in React:

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;

In the above code, the DeviceList component acceptsdevices as a property, which is an array of devices. The map method is used to iterate through the device array and render a <li> element for each device. Among them, the src attribute is set to the server image path of the device. If the load fails, the onError event handler is triggered, using the require import to set the src attribute of the image, thereby displaying the alternate Local pictures. Inline arrow functions are used here to define event handlers for each <img> element.

You can useDeviceList in the parent component and pass the device array:

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;

Be sure to replace "服务器图片路径" in each device object with the actual server image path, and "本地图片路径" with the actual local image path.

This way, for each device, the image is loaded according to the server image path, and if the load fails, an alternative local image is displayed.