Как передать путь изображения как опору в Gatsby в Gatsby-plugin-image

Я пытаюсь передать путь изображения в качестве опоры для компонента

Примечание. И компонент, и страница индекса могут получить доступ к изображению по одному и тому же пути. Не работает, когда я прохожу путь в качестве опоры

В приведенном ниже коде я пробовал использовать теги GatbsyImage и StaticImage, похоже, что оба они не работают.

index.js

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import '../styles/index.scss';
import Main from  '../Layouts/main';
import ImageOverlay from '../components/ImageOverlay';
import { StaticImage } from "gatsby-plugin-image"

function Home(){
  // Home page images
  return (
    <Main >
    <section className="home_page">
      <ImageOverlay path="../images/home/places/portblair.png"> </ImageOverlay>
    </section>
    </Main>
  )
}

export default Home

компоненты / ImageOverlay.js

import React from 'react';
import { GatsbyImage, StaticImage } from "gatsby-plugin-image"
const ImageOverlay = ({path}) =>{
    return(

      <div>
          <GatsbyImage image={path}></GatsbyImage>
          <StaticImage src={path}></StaticImage>
      </div> 
  
    )
}
export default ImageOverlay;

Я использовал GatsbyImage и StaticImage, чтобы проверить

Спасибо за помощь в продвижении


gatsby gatsby-image gatsby-plugin
person Sanjay Kapilesh    schedule 23.03.2021    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы не можете использовать внешний props на StaticImage, это известное ограничение:

Ограничения на использование StaticImage

Есть несколько технических ограничений на то, как вы можете передавать реквизиты в StaticImage. Самое главное, вы не можете использовать какие-либо свойства родительского компонента. Для получения дополнительной информации см. Справочное руководство по подключаемому модулю Gatsby Image. Если вы обнаружите, что хотите использовать свойство, переданное от родителя для изображения src, то, вероятно, вам следует использовать динамическое изображение.

И расширение указанного руководства:

// ⚠️ Doesn't work
export function Logo({ logo }) {
  // You can't use a prop passed into the parent component
  return <StaticImage src={logo}>
}

Решение, если вы хотите использовать StaticImage, заключается в использовании статического подхода, добавляя напрямую src:

import React from 'react';
import { GatsbyImage, StaticImage } from "gatsby-plugin-image"
const ImageOverlay = ({path}) =>{
    return(

      <div>
          <StaticImage src={`../images/home/places/portblair.png`}></StaticImage>
      </div> 
  
    )
}
export default ImageOverlay;

Если вы хотите использовать GatsbyImage, вам нужно будет запросить ваше изображение, чтобы получить правильные данные:

import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"

function Home({ data }) {
 const image = getImage(data.blogPost.avatar)
 return (
   <section>
     <GatsbyImage image={image} alt={data.blogPost.author} />
     <p>{data.blogPost.body}</p>
   </section>
 )
}

export const pageQuery = graphql`
 query {
   blogPost(id: { eq: $Id }) {
     title
     body
     author
     avatar {
       childImageSharp {
         gatsbyImageData(
           width: 200
           placeholder: BLURRED
           formats: [AUTO, WEBP, AVIF]
         )
       }
     }
   }
 }
`

Примечание: конечно, адаптируйте фрагмент под свои нужды, но поймите суть

Если вы хотите использовать динамическое изображение, вы должны сделать запрос GraphQL, чтобы позволить Гэтсби и их преобразователям проанализировать и разрешить изображение. Вы можете использовать набор доступных фильтров для создания определенного запроса для вашего изображения, используя, а также relativePath и absolutePath, проверьте запрос на localhost:8000/___graphql.

person Ferran Buireu    schedule 23.03.2021