[英]Create a dynamic height width image component in react
I am trying to create a dynamic image component which will be using a material-ui CardMedia
and will pass only height and width.我正在尝试创建一个动态图像组件,该组件将使用 material-ui CardMedia
并且仅传递高度和宽度。
I have following code我有以下代码
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'}
/>
)
}
I am calling this from somewhere else like我从其他地方调用这个
<BuyingImage />
Can anyone help me with this?谁能帮我这个? Thanks谢谢
First, kindly checkout Material-UI Card document , since CardMedia
is used inside a Card
, and the prop for url is image
not alt
首先,请CardMedia
Material-UI Card 文档,因为CardMedia
是在Card
内部使用的,并且 url 的 prop 是image
而不是alt
As for dynamic height and width, simply pass the value as props seem to work good enough.至于动态高度和宽度,只需传递值,因为道具似乎工作得足够好。
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>
);
};
You can try it yourself here:你可以在这里自己尝试:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.