How do you render an image with Card.Img in React Bootstrap and Gatsby?

Question

I created a component that makes a Card with a photo and text inside the image, however, I get the alt text when rendering the <Card.Img> tag but displays the image to the site. Should I just use src or is there a way to use fluid?

const Page = ({ title, subtitle, path, date, body, image}) => {
    return(
        <Card>
            <Card.Img fluid={image} alt="Card image" />
            <Card.ImgOverlay>
                <Card.Title> {title} </Card.Title>
                <Card.Subtitle> {subtitle} </Card.Subtitle>
                <Card.Subtitle> {path} </Card.Subtitle>
                <Card.Subtitle> {date} </Card.Subtitle>
                <Card.Body> {body} </Card.Body>
                <Img fluid={image} />
            </Card.ImgOverlay>
        </Card>

    )
}
export default Page

Answer 1

Card.Img does not have a fluid prop by default, but the Image component does. Also, take note that fluid accepts a boolean value, not an image source. You can use the as prop of the Card.Img component to use a custom component Image if you must use the fluid properties.

import { Image } from "react-bootstrap";

<Card.Img as={Image} src={image} fluid={true} alt="Card image" />

---

An alternate solution would be to just include the class of img-fluid to the Card.Img

<Card.Img src={image} className="img-fluid" alt="Card image" />