从 API (React) 获取并显示图像
2022-09-11
33902
我有包含许多对象的本地 API 每个对象中都有一张图片 像这样:
{
created_at: "2022-09-10T19:40:24.000000Z"
id: 2
service_id: 1
state_image: "202209101955Screenshot (303).png"
state_text_ar: "agaga"
state_text_en: "afgagfa"
state_title_ar: "nice"
state_title_en: "idaljflia"
state_title_secondary_ar: "gagag"
state_title_secondary_en: "afaf"
updated_at: "2022-09-10T19:55:43.000000Z"
}
问题:
当我调用
state_image
来显示图像时
它没有显示出来。
react 代码:
React.createElement("div", {
className: "slideContent",
style: {
backgroundImage: `url('${slide.state_image}')` }
}
如您在背景图像中看到的那样(有一个图像) 但屏幕上什么都没有显示
2个回答
要使用 React 从 API 获取图像,我们可以使用 fetch 函数。
例如,我们这样写:
import React, { useEffect, useState } from "react";
const imageUrl = "https://i.imgur.com/fHyEMsl.jpg";
export default function App() {
const [img, setImg] = useState();
const fetchImage = async () => {
const res = await fetch(imageUrl);
const imageBlob = await res.blob();
const imageObjectURL = URL.createObjectURL(imageBlob);
setImg(imageObjectURL);
};
useEffect(() => {
fetchImage();
}, []);
return (
<>
<img src={img} alt="icons" />
</>
);
}
我们使用 imageUrl 调用 fetch 来向其发出 GET 请求。
然后我们调用 res.blob 将响应对象转换为 blob。
接下来,我们使用 imageBlob 调用 URL.createObjectURL 将其转换为 URL 字符串,我们可以将其设置为 img 元素的 src 属性。
最后,我们使用 imageObjectURL 调用 setImg,这样我们就可以将 img 设置为 src 的值来显示它。
结论 要使用 React 从 API 获取图像,我们可以使用 fetch 函数。
yanir midler
2022-09-11
更改为:
React.createElement("div", {
className: "slideContent",
style: {
backgroundImage: `url(${slide.state_image})` }
}
HOPE
2022-09-11