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

Желанный

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

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


reactjs javascript image css gatsby
person Charis Theo    schedule 11.03.2019    source источник
comment
display: inline-block! important вы пробовали?   -  person duc mai    schedule 12.03.2019
comment
Вы пытались изменить отображение img, а не только контейнера? Таким образом, 1_   -  person zgood    schedule 12.03.2019
comment
Прошу прощения, ребята, за путаницу, которую я не понял с результатами, которые я получаю. Стили применяются, однако изображения не отображаются вообще или не переносятся   -  person Charis Theo    schedule 12.03.2019

Ответы (1)


arrow_upward
1
arrow_downward

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