Как добавить встроенные изображения с помощью gatsby-image?

Question

Желаемая

Я пытался запросить и отобразить некоторые изображения с максимальной шириной 350 пикселей и для планшетов и выше. Я хотел бы отобразить их 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;  
}

Я искал 2 дня и в выпусках gatbsy и gatbsy в StackOverflow и Github, но безуспешно.

Любая помощь будет принята с благодарностью. Спасибо!

Answer 1

Хорошо, мне удалось найти причину, по которой они не рендерились.Изображения со свойством display, равным inline-block, не будут отображаться, если не указано свойство CSS 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 элементу parent этих изображений, чтобы посмотретьнемного приятнее;)