React-slick 与 gatsby-plugin-image

Posted 2023-02-19

【中文标题】React-slick 与 gatsby-plugin-image

【英文标题】：React-slick with gatsby-plugin-image

【发布时间】：2021-06-08 18:40:50

【问题描述】：

我正在尝试将 React-slick 与 gatsby-plugin 图像一起使用，并且我有这样的页面设置。

import React from "react";
import  graphql  from "gatsby"
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import  GatsbyImage  from "gatsby-plugin-image"

const settings = 
  autoPlay: true,
  arrows: false,
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
;

const ImgSlide = ( data ) => 
  return (
    <div>
      <Slider ...settings>
        <div>
          <GatsbyImage fluid=data.image1.childImageSharp.fluid />
        </div>
        <div>
        <GatsbyImage fluid=data.image2.childImageSharp.fluid />
        </div>
      </Slider>
    </div>
  );
;

export const pageQuery = graphql`
  query 
    image1: file(relativePath:  eq: "images/icon.png" ) 
      childImageSharp 
        fluid 
          ...GatsbyImageSharpFluid
        
      
    
    image2: file(relativePath:  eq: "images/icon.png" ) 
      childImageSharp 
        fluid 
          ...GatsbyImageSharpFluid
        
      
    
  
`

export default ImgSlide;

当我运行 Gatsby develop 时，我收到一条错误消息，提示 image1 未定义。我真的不知道我在这里错过了什么。我认为这与我尝试定义 image1 的方式有关，但我很确定我已经正确使用了 relativePath，除非我没有正确指定位置。

我确实指定了两次相同的图像，这只是因为我还没有导入照片，我只是在测试以使其正常工作。

gatsby-config 设置是

module.exports = 
  siteMetadata: 
    title: "Inkd Era",
    description: "Clothing and brand built for tattoo and tattoed culture",
  ,
  plugins: [
    "gatsby-plugin-sass",
    "gatsby-plugin-image",
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-sitemap",
    
      resolve: "gatsby-plugin-manifest",
      options: 
        icon: "src/images/icon.png",
      ,
    ,
    "gatsby-transformer-remark",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    
      resolve: "gatsby-transformer-remark",
      options: 
        plugins: [
          
            resolve: "gatsby-remark-images",
            options: 
              maxWidth: 650,
            ,
          ,
        ],
      ,
    ,
    
      resolve: "gatsby-source-filesystem",
      options: 
        name: "images",
        path: `$__dirname/src/images/`,
      ,
      __key: "images",
    ,
    
      resolve: "gatsby-source-filesystem",
      options: 
        name: "pages",
        path: `$__dirname/src/pages/`,
      ,
      __key: "pages",
    ,
    
    resolve: `gatsby-plugin-manifest`,
    options: 
      name: `Inkd Era`,
      short_name: `Inkd era`,
      start_url: `/`,
      background_color: `#000`,
      theme_color: `#fafafa`,
      display: `standalone`,
      icon: `content/assets/gatsby-icon.png`,
    ,
  ,
  ],
;

【问题讨论】：

从在 Playground 中测试查询开始

因此，当我在 graphiql 中运行查询时，运行相同的查询结构确实会显示查询的文件。这一定是 image1: 和 image:2 的问题，但我不知道如何声明这些，以便我可以单独引用它们。

console.log(data); 在返回 JSX 之前？

当我尝试在 localhost 中打开时，盖茨比甚至无法构建它会给出错误并且不会让我通过它。

渲染一些假组件甚至是字符串？

【参考方案1】：

新的<GatsbyImage> 组件在传递图像本身时的结构是使用image prop，而不是fluid。此外，查询需要获取gatsbyImageData，而不是fluid，正如您在docs 中看到的那样：

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

function BlogPost( data ) 
  const image = getImage(data.blogPost.avatar)
  return (
    <section>
      <h2>data.blogPost.title</h2>
      <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]
          )
        
      
    
  
`

在您的场景中，您将来自 Gatsby v2 的 gatsby-image 方法与仍处于测试阶段的新 gatsby-plugin-image 方法混合在一起，但它来自 v3。

如果您想使用<GatsbyImage>，请根据需要调整查询和组件，否则，请正确使用gatsby-image，例如：

import Img from `gatsby-image`

<Img fluid=data.image1.childImageSharp.fluid />