个人设计网站论文摘要,电子商务做网站实训体会,wordpress删除 自豪的,深圳知名网站前端小案例-图片存放在远端服务器
项目背景#xff1a;
一个智能产业园的小程序由于可以控制很多种设备#xff0c;可能有灯、空调、窗帘等智能设备。
现在面临以下问题#xff1a;
需要存放很多设备的图标。设备的图标可能会进行修改。
为了解决上面的问题#xff0c…前端小案例-图片存放在远端服务器
项目背景
一个智能产业园的小程序由于可以控制很多种设备可能有灯、空调、窗帘等智能设备。
现在面临以下问题
需要存放很多设备的图标。设备的图标可能会进行修改。
为了解决上面的问题我们可以将设备的图标保存在远端的服务器。从服务器请求图片到本地进行渲染。
但是这样可能会导致一个新的问题就是如果服务器挂了小城序的图标就不能够使用了。对此我们的对策是当服务器获取不到图片的时候就使用本地的某张备用照片。
根据上述背景整理出下列案例
案例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}altDevice ImageonError{(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 (divDeviceList devices{devices} //div);
}export default App;
确保将每个设备对象中的服务器图片路径替换为实际的服务器图片路径将本地图片路径替换为实际的本地图片路径。
这样对于每个设备会根据服务器图片路径加载图片如果加载失败则会显示备用的本地图片。
