如何将 IonImg 元素的图像数据设置为“Buffer”类型变量的内容？

Question

我正在使用 Ionic 7 和 React 18。我定义了这种类型

interface Card {
    ...
  frontImg: Buffer;
  frontImgAltText: string;
    ...
}

在我的组件中，如何将 IonImg 元素的图像设置为上述缓冲区中的图像数据？我试过这个

 const base64Data = card.frontImg.toString("base64");
  const dataUri = `data:image/png;base64,${base64Data}`;

      <IonImg src={dataUri} alt="My Image" />

但是尽管当我将变量输出到 console.log 时我看到了二进制内容，但什么也没有出现。

Answer 1

要在 Ionic React 应用程序中的 IonImg 组件中显示来自 Buffer 的图像，您可以将 Buffer 转换为 base64 数据 URI，并将其用作 IonImg 组件的 src 属性。但是，Ionic React 不支持直接使用数据 URI 作为 src 属性。

为了克服此限制，您可以创建一个自定义组件来处理从缓冲区数据渲染图像。这是一个例子：

import { IonImg } from '@ionic/react';
import React from 'react';

interface CardProps {
  card: Card;
}

const CardComponent: React.FC<CardProps> = ({ card }) => {
  const [imageSrc, setImageSrc] = React.useState('');

  React.useEffect(() => {
    const base64Data = Buffer.from(card.frontImg).toString('base64');
    const dataUri = `data:image/png;base64,${base64Data}`;
    setImageSrc(dataUri);
  }, [card.frontImg]);

  return <IonImg src={imageSrc} alt={card.frontImgAltText} />;
};

export default CardComponent;

在此示例中，我们创建一个 CardComponent，它将卡片对象作为 prop。在组件内部，我们使用 React.useState 和 React.useEffect 将 frontImg Buffer 转换为 base64 数据 URI，并将其设置为 IonImg 组件的 src 值。通过使用带有包含card.frontImg的依赖数组的React.useEffect，我们确保只要frontImg数据发生变化，图像就会重新渲染。

然后您可以在主组件中使用此 CardComponent，如下所示

import React from 'react';
import CardComponent from './CardComponent';

const MainComponent: React.FC = () => {
  const card: Card = {
    // ... card properties
    frontImg: bufferData, // Replace with your specific Buffer data
    frontImgAltText: 'My Image Alt Text',
    // ... other card properties
  };

  return (
    <div>
      {/* ... other content */}
      <CardComponent card={card} />
    </div>
  );
};

export default MainComponent;