typescript 将图像文件转换为base64字符串以显示在react.js Web应用程序上

7nbnzgx9  于 2023-01-31  发布在  TypeScript
关注(0)|答案(1)|浏览(309)

我正在从终结点接收图像作为文件。我需要能够以某种方式显示此图像。
我试图将其转换为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" />

有人能帮帮忙吗??

xzlaal3s

xzlaal3s1#

参考:
https://www.npmjs.com/package/image-to-base64
否则,您可以使用下面的代码。
常量blob =等待获取(imageSrc).然后((res)=〉res.blob())
常量表单数据=新表单数据()
formData.append(“图像”,二进制大对象)

相关问题