Невозможно отобразить Img из gatsby-image - PullRequest
Новая
       32

Невозможно отобразить Img из gatsby-image

0 голосов
/ 20 марта 2020

Я пытаюсь отобразить изображение, используя Img from 'gatsby-image'. Я использую graphql для извлечения данных изображения из каталога src/images.

Запрос возвращает данные, и вот вывод консоли: 

file:
id: "f5c79f46-ac62-5305-9093-3087798d574f"
childImageSharp:
id: "60159a12-0e63-532a-b95a-9f2714358d00"
fluid:
base64: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsSAAALEgHS3X78AAAEX0lEQVQ4y32Ue0zbVRTH2/76freUR/srtLRllI1Hy1gZbUFYgQnZ0pUOxkbBdqU8xpopyGPA5mvq1skyfGCYkb0CA8N0A0OCOphZND3C0f6HyRCzWNs/CSeDYTmYZzs0fdkXai/N8BXzpLioH3IY/9P+BlacvQ3uuAHuAAAAAElFTkSuQmCC"
aspectRatio: 1.187279151943463
src: "/static/59ab759908e0dac65e98b73407125e75/7b9fb/bitmoji.png"
srcSet: "/static/59ab759908e0dac65e98b73407125e75/e1953/bitmoji.png 250w,↵/static/59ab759908e0dac65e98b73407125e75/7b9fb/bitmoji.png 336w"
sizes: "(max-width: 336px) 100vw, 336px"

однако изображение не рендеринг на страницу. Вот код для компонента: 

import { Link, graphql,useStaticQuery } from "gatsby";
import React, {useState,useEffect} from "react";
import './style.scss';
import bitmoji from '../images/bitmoji.png';
import Img from 'gatsby-image';

const Header = (props) => {
  const {siteTitle} = props;
  const imgQuery = useStaticQuery(graphql`
  query {
    file(relativePath: {eq : "bitmoji.png"}){
    childImageSharp {
      fluid(maxWidth : 1000) {
        ...GatsbyImageSharpFluid
      }
    }
  }
}`);

  return (
    <header className={scroll ? "nav scroll" : "nav"}>
        <div className="title">
          <Img fluid={imgQuery.file.childImageSharp.fluid}/>
          <Link to="/">{siteTitle}</Link> 
        </div>
    </header>
  )
}

1 Ответ

0 голосов
/ 20 марта 2020

Если я скопирую ваш компонент, замените bitmoji.png на gatsby-astronaut.png, похоже, он работает как положено. 

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

const Header = props => {
  const imgQuery = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "gatsby-astronaut.png" }) {
        childImageSharp {
          fluid(maxWidth: 1000) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  return (
    <header>
      <div className="title">
        <Img fluid={imgQuery.file.childImageSharp.fluid} />
      </div>
    </header>
  )
}

export default Header
...