如何在 React Bootstrap 和 Gatsby 中使用 Card.Img 渲染图像？答案

【问题标题】：How do you render an image with Card.Img in React Bootstrap and Gatsby?如何在 React Bootstrap 和 Gatsby 中使用 Card.Img 渲染图像？
【发布时间】：2020-08-22 02:32:06
【问题描述】：

我创建了一个组件，该组件制作了一张卡片，其中包含一张照片和图片中的文字，但是，我在渲染标记时获得了替代文本，但将图像显示到了站点。我应该只使用 src 还是有办法使用流体？

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

【问题讨论】：

标签： reactjs gatsby react-bootstrap

【解决方案1】：

Card.Img 默认没有 fluid 属性，但 Image 组件有。另外，请注意fluid 接受boolean 值，而不是图像源。如果必须使用fluid 属性，则可以使用Card.Img 组件的as 属性来使用自定义组件Image。

import { Image } from "react-bootstrap";

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

另一种解决方案是仅将 img-fluid 类包含到 Card.Img 中

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

【讨论】：

【解决方案2】：

要使用来自gatsby-image 的<Img> 组件，您需要使用childImageSharp GraphQL 片段或其他方法来获取所有需要的数据来查询数据。在您的情况下，我假设 image prop 仅包含图像的源，而不是来自查询片段本身的所有数据，这就是您的图像未显示的原因。

没有看到您的查询，您有三种解决方法：

使用原生 HTML <img> 标签：

        <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 src={image} alt={`Your alt text`}/>
        </Card.ImgOverlay>

使用来自 React Boostrap 的 <Card.Img> 组件：

        <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>
            <Card.Img src={image} alt={`Your alt text`}/>
        </Card.ImgOverlay>

使用 GraphQL 查询片段检索正确使用 gatsby-image 所需的所有数据。理想的方法应该如下所示：

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) => (
   <div>
     <h1>Hello gatsby-image</h1>
     <Img fluid={data.file.childImageSharp.fluid} />
   </div>
)

export const query = graphql`
   query {
     file(relativePath: { eq: "your/path/to/image.jpeg" }) {
       childImageSharp {
         # Specify the image processing specifications right in the query.
         # Makes it trivial to update as your page's design changes.
         fluid(width: 125) {
           ...GatsbyImageSharpFluid
         }
       }
     }
   }
`

请注意，您可能需要根据您的组件、规格和要求调整上面的 sn-p。

如您所见，上面的 GraphQL 查询包含 ...GatsbyImageSharpFluid 片段（这与从图像中一一获取所有属性完全相同）。现在，您的data 对象包含使用<Img> 组件所需的所有数据，您可以将fluid prop 与<Img fluid={data.file.childImageSharp.fluid} /> 一起使用

您可以在Gatsby Image documentation查看更多详细信息

【讨论】：