[英]React JS: rendering an image from blob
我正在尝试通过从useEffect
挂钩调用 API 在我的页面上呈现图像。 该服务返回一个 blob,该 blob 保存在 state 中。 最后,从图像 src 属性调用 state 变量。
到目前为止,我已经尝试在图像 src 的属性中使用URL.createObjectURL()
方法,但出现以下错误。
<img src={URL.createObjectURL(blob)} alt="test image" />
我还尝试将 blob 的字符串转换为 blob,然后将其传递给URL.createObjectURL()
方法。 结果是一个 src 属性为blob:https://i86fqf.csb.app/fcab2185-c1b2-4fe7-9c9b-8ca3c56a4467
的图像,但图像未加载。
// Other imports ...
import response from "./response";
export default function App() {
const [imageBlob, setImageBlob] = useState(response);
const blob = new Blob([imageBlob.items[0].image.$content], {
type: "image/jpeg"
});
const imageURL = URL.createObjectURL(blob);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<img src={imageURL} alt="img" />
</div>
);
}
知道我缺少什么吗? 您可以在此处找到代码示例https://codesandbox.io/s/image-blob-not-loading-i86fqf
'$content' 是 base64 字符串,如果您想从中创建 blob,可以在此处研究帖子: 从 Z686155AF75A60A0F6E9D80C1F7EDD3E 中的 Base64 字符串创建 BLOB
或者您可以简单地添加“data:image/png;base64”,使 base64 作为 src 工作。
const base64 = `data:image/png;base64,${imageBlob.items[0].image.$content}`;
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<img src={base64} alt="img" />
</div>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.