时间戳

首页 > 解决方案 > 如何在 Typescript 中将图像作为道具传递

reactjs - 如何在 Typescript 中将图像作为道具传递

问题描述

我刚刚开始使用 Typescript 并遇到了一个问题，可能是一个基本问题。

我正在尝试使用以下代码将一些图像作为道具传递。而且，我得到了附加图像的结果。但是，它不显示作为道具传递的图像。

我假设我使用的图像的相关类型是错误的，但我找不到纠正该错误的方法。根据我的理解，我只是在尝试替换图像的某些类型。

interface Props {
  thumbnailHeading: string;
  playBtn: string | undefined;
  thumbnail: string | undefined;
}

export const DisplayBox = memo(
  (props: Props): JSX.Element => {
    return (
      <div className="grid-container">
        <div className="box">
          <img className="samllImage" src={props.playBtn} />
          <img className="largeImage" src={props.thumbnail} />
          <div className="content">{props.thumbnailHeading}</div>
        </div>
      </div>
    );
  },
);

这就是我分配相关道具的方式，由上面的代码定义。

<DisplayBox
   thumbnailHeading="Sample Text Title"
   playBtn="./image_files/SmallImage.png"
   thumbnail="./image_files/LargeImage.jpeg"
/>

在此处输入图像描述

标签： reactjstypescript

解决方案

这不是 TypeScript 的问题，而是您导入或引用静态图像资产的方式。当您尝试包含或import图像或静态资产时，而不是直接发送路径，您需要做的是，首先导入它们：

import SmallImage from "./image_files/SmallImage.png";
import LargeImage from "./image_files/LargeImage.jpeg";

然后你传递变量：

<DisplayBox
   thumbnailHeading="Sample Text Title"
   playBtn={SmallImage}
   thumbnail={LargeImage}
/>

这是因为代码是由 WebPack 或您正在使用的任何捆绑程序编译的和资产压缩的。此外，请确保对您在src目录中导入的任何静态资产执行相同的方法。

推荐阅读