我正在从终结点接收图像作为文件。我需要能够以某种方式显示此图像。
我试图将其转换为base64字符串,但图像不会显示??它只显示alt文本
const [image, setImage] = useState<string | null>(null);
const { data: Image } = useQuery(['getImage', id], () =>
userService.getImage(id),
);
useEffect(() => {
if (!Image) return;
const reader = new FileReader();
const blob = new Blob([Image], { type: 'image/jpeg' });
console.log(blob);
reader.onload = () => {
setImage(reader.result);
};
reader.readAsDataURL(blob);
}, [Image]);
<img className="w-40 h-40 rounded-lg" src={`data:image/jpeg;base64,${image}`} alt="Image" />
有人能帮帮忙吗??
1条答案
按热度按时间xzlaal3s1#
参考:
https://www.npmjs.com/package/image-to-base64
否则,您可以使用下面的代码。
常量blob =等待获取(imageSrc).然后((res)=〉res.blob())
常量表单数据=新表单数据()
formData.append(“图像”,二进制大对象)