javascript - 如何使用 gatsby-image 添加内联图像？

Question

想要的

我一直在尝试查询和显示一些最大宽度为 350px 的图像，对于平板电脑及更高版本，我想显示它们 inline-block，每个图像相邻并在填充时换行他们的父 div。

---

问题

已应用自定义 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 的图像inline-block的属性(property)如果 width 则不会呈现未指定 CSS 属性。

所以在将数据传递给 <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在这些图像的 parent 元素上看起来更漂亮一些；)