如何使用gatsby-image添加嵌入式图像？

Question

所需

我一直在尝试查询和显示一些最大宽度为350px的图像，对于平板电脑及以上的平板电脑，我想将它们inline-block彼此相邻显示，并在它们填充其父div时进行包装。 / p>

---

问题

将应用自定义CSS样式，但是图像不会内联显示或完全不呈现。

---

当前结果

我尝试了display: inline-block，float: left，overflow-wrap: break-word和flex-wrap: wrap中的每一个，但是每次图像显示为block或未在全部。

---

这是我的组成部分：

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

import AccessoryStyles from "./accessory.module.css"

const Accessory = () => (
<StaticQuery
    query={graphql`
      query {
        allFile(
          filter: {
            extension: { regex: "/(jpg)|(jpeg)|(png)/" }
            relativeDirectory: { eq: "Lanka-Belt" }
          }
        ) {
          edges {
            node {
              childImageSharp {
                sizes(maxWidth: 350) {
                  ...GatsbyImageSharpSizes_withWebp
                  presentationWidth
                }
              }
            }
          }
        }
      }
    `}
    render={data => {
      const images = data.allFile.edges.map((image, index) => (
        <div className={AccessoryStyles.imageContainer}>
          <Img
            key={index}
            style={{
              maxWidth: image.node.childImageSharp.sizes.presentationWidth,
            }}
            sizes={image.node.childImageSharp.sizes}
          />
        </div>
      ))
      return {images}
     }
    }
 />
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

这是accessory.module.css中我的自定义样式：

.image-container {
  display: inline-block;  
}

我已经在StackOverflow和Github上搜索了2天的gatbsy和gatbsy-image问题，都没有运气。

任何帮助将不胜感激。 谢谢！

Answer 1

好的，我设法找到了它们无法渲染的原因。如果未指定display CSS属性，则inline-block属性为width的图像将不会呈现。

因此，在将数据传递到<Img />组件之后，我直接在width组件本身上设置了display和<Img />样式。所以渲染功能现在看起来像这样：

render={data => {
  const images = data.allFile.edges.map((image, index) => (
    <div className={AccessoryStyles.imageContainer}>
      <Img
        key={index}
        style={{
          maxWidth: image.node.childImageSharp.sizes.presentationWidth,
          width: image.node.childImageSharp.sizes.presentationWidth,
          display: "inline-block",
        }}
        sizes={image.node.childImageSharp.sizes}
      />
    </div>
  ))
  return {images}
 }
}

• 您可能希望在这些图像的父级元素上传递一个display: flex和flex-wrap: wrap，以使其看起来更好一些；）