Hello, I've encountered a problem with rendering an image in my application. Let me explain the issue in a simplified manner.
So, I have a card component (MyCardComponent) where I need to pass a string prop containing the image file location. The goal is to display this image in a CardMedia element within a material-ui Card.
Unfortunately, despite my efforts, the image is not appearing. How can I resolve this and get the image to render properly? You can check out the recreated issue on CodeSandbox by clicking on this link: https://codesandbox.io/s/image-on-card-kyx0s?fontsize=14&hidenavigation=1&theme=dark
MyCardComponent.js
import React from "react";
import PropTypes from "prop-types";
import "./styles.css";
import { makeStyles } from "@material-ui/core/styles";
import { Card, CardMedia, CardContent } from "@material-ui/core";
const useStyles = makeStyles(theme => ({
cardRootStyle: {
minHeight: 300,
maxHeight: 300
},
cardMediaStyle: {
minHeight: 100,
maxHeight: 100
}
}));
export default function MyCardComponent(props) {
const styles = useStyles();
return (
<>
<Card
classes={{
root: styles.cardRootStyle
}}
>
<CardContent>
<CardMedia image={props.imagePath} />
</CardContent>
</Card>
</>
);
}
MyCardComponent.propTypes = {
imagePath: PropTypes.string
};
To use MyCardComponent, you can do so like this:
<MyCardComponent imagePath='/static/sampleimages/cocacola.png'/>