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

问：

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

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

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

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

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

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

ReactJS 镜像离子框架缓冲区 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，它将 card 对象作为 prop。在组件内部，我们使用 React.useState 和 React.useEffect 将 frontImg Buffer 转换为 base64 数据 URI，并将其设置为 IonImg 组件的 src 值。通过将 React.useEffect 与包含 card.frontImg 的依赖数组一起使用，我们确保每当 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;

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

How do I set the image data of an IonImg element to be the contents of a variable of type "Buffer"?

评论

评论