可以通过以下步骤实现:
const blobToDataURL = (blob) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => {
resolve(reader.result);
};
reader.onerror = reject;
reader.readAsDataURL(blob);
});
};
import React, { useEffect, useState } from 'react';
const ImageCell = ({ blob }) => {
const [imageUrl, setImageUrl] = useState('');
useEffect(() => {
const convertBlobToImage = async () => {
try {
const dataUrl = await blobToDataURL(blob);
setImageUrl(dataUrl);
} catch (error) {
console.error('Error converting Blob to DataURL:', error);
}
};
convertBlobToImage();
}, [blob]);
return <img src={imageUrl} alt="Image" />;
};
export default ImageCell;
在上述代码中,使用了React的useState和useEffect钩子来处理异步转换操作。当传入的blob属性发生变化时,会触发useEffect中的回调函数,将Blob转换为DataURL,并将其设置为imageUrl状态的值。最后,将imageUrl作为图像的src属性值进行显示。
这种方法适用于将Blob转换为图像并在React中显示。根据具体的业务需求,可以将其应用于表格、列表等组件中的单元格内。
领取专属 10元无门槛券
手把手带您无忧上云