I have just started to use Typescript and got an issue, possibly a basic.
I am trying to pass some images as props by using following code. And, I am getting the result of attached image. But, it does not display the images, which are passed as props.
I assume the relevant type for images, that I have used is wrong, but I could not find a way to rectify that error. I was just trying by replacing some types for the images, as per my understanding.
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>
);
},
);
This is how I assigned related props, defined by above code.
<DisplayBox
thumbnailHeading="Sample Text Title"
playBtn="./image_files/SmallImage.png"
thumbnail="./image_files/LargeImage.jpeg"
/>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…