Создать динамический c высота ширина компонента изображения в реакции

Question

Я пытаюсь создать динамический c компонент изображения, который будет использовать материал-ui CardMedia и будет передавать только высоту и ширину.

У меня следующий код

interface ImageDim extends StyledProps {
  width: number,
  height: number
}

const MediaImage = styled.img`
  width: ${props => props.width}px;
  height: ${props => props.height}px;
  object-fit: contain;
`;

export const BuyingImage  = () => {
  return (
    <CardMedia
      alt={'IMAGE'}
    />
  )
} 

Я звоню из другого места, например

<BuyingImage />

Кто-нибудь может мне помочь с этим? Спасибо

Answer 1

Сначала просим оформить заказ Документ Material-UI Card , поскольку CardMedia используется внутри Card, а реквизит для URL равен image, а не alt

Что касается динамических c высоты и ширины, просто передайте значение, поскольку реквизит, кажется, работает достаточно хорошо.

export default function App() {
  return <Image size={{ width: 400, height: 200 }} />;
}

const Image = props => {
  const width = props.size.width;
  const height = props.size.height;
  return (
    <Card
      style={{
        width: `${width}px`,
        height: `${height}px`
      }}
    >
      <CardMedia
        className="media"
        image={`https://via.placeholder.com/${width}x${height}`}
      />
    </Card>
  );
};

Вы можете попробовать это себя здесь: