1

大家好

我需要帮助，因为我正在努力使用带有道具的 gatsby-plugin-image StaticImage ...

我有一个组件预告片，我正在使用道具来获取数据。一切都适用于所有道具，如标题、年份等......除了 StaticImage 的 src ......

我读过 StaticImage 不接受道具，但现在对我来说真的很困惑。

这是组件的代码：

import React from 'react';
import { StaticImage } from 'gatsby-plugin-image';

function Trailer(props) {
  
  return (
    <div className="trailer">
      <div className="trailer-entry-content">
 
        <StaticImage
          src={props.imageTrailer}
          width={312}
          quality={95}
          placeholder="blurred"
          formats={['AUTO', 'WEBP', 'AVIF']}
          alt="Catlike Productions"
          className="trailer-img"
        />

        <h2 className="trailer-title">{props.title}</h2>
  
      </div>

      <div className="trailer-infos">
        <h3 className="title">{props.title}</h3>
        <div className="year">
          <strong>Year:</strong> {props.year}
        </div>
        <div className="director">
          <strong>Director:</strong> {props.director}
        </div>
        <div className="prod">
          <strong>Production Co:</strong> {props.production}
        </div>
      </div>
    </div>
  );
  // }
}

export default Trailer;

这是我使用预告片的组件，以及调用查询的位置：

import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';
import Trailer from './Trailer';

export default function TrailersFiction({ children }) {
  const dataFiction = useStaticQuery(
    graphql`
      query {
        allTrailersXml(
          filter: {
            xmlChildren: {
              elemMatch: {
                content: { eq: "Fiction" }
                name: { eq: "Typesdetrailers" }
              }
            }
          }
        ) {
          edges {
            node {
              id
              xmlChildren {
                name
                content
              }
            }
          }
        }
      }
    `
  );

  const trailerFiction = dataFiction.allTrailersXml.edges;

  return (
    <div id="trailers" className="trailers-content">
      <div className="trailers-cat">
        <h1>Fiction</h1>
      </div>
      <div className="trailers-container">
        {trailerFiction.map(({ node }, index) => (
          <Trailer
            key={index}
            imageTrailer={node.xmlChildren[3].content}
            title={node.xmlChildren[1].content}
            year={node.xmlChildren[8].content}
            production={node.xmlChildren[7].content}
            director={node.xmlChildren[5].content}
          />
        ))}
      </div>
    </div>
  );
}

我的查询工作正常，它返回这样的结果，其中图像的 src 在 xmlChildren -> content 中：

{
  "data": {
    "allTrailersXml": {
      "edges": [
        {
          "node": {
            "id": "5086b3a8-547e-50da-9c7a-80ae69541373",
            "xmlChildren": [
              {
                "name": "ID",
                "content": "35"
              },
              {
                "name": "Title",
                "content": "trailer-Partum"
              },
              {
                "name": "Typesdetrailers",
                "content": "Fiction"
              },
              {
                "name": "imagedutrailer",
                "content": "https://catlike-prod.com/wp-content/uploads/2017/01/post-partum.jpg"
              },
              {
                "name": "Trailer",
                "content": "198346812"
              },
              {
                "name": "Director",
                "content": "Delphine Noels"
              },
              {
                "name": "Stars",
                "content": "Mélanie Doutey, Jalil Lespert ..."
              },
              {
                "name": "ProductionCo",
                "content": "Frakas Productions, Juliette Films, Paul Thiltges Distributions"
              },
              {
                "name": "Anne",
                "content": "2013"
              }
            ]
          }
        },

正如我所说，我得到了我需要的所有数据（标题、年份、制作、导演），除了 imageTrailer，它将 url 作为图像的字符串......

例如，如果我 console.log({node.xmlChildren[3].content})，我得到： string: 'https://catlike-prod.com/wp-content/uploads/2017/01/post-partum. jpg'

如果我使用经典的 html5 ：

它工作正常，我得到了我的图像渲染

那么为了使用StaticImage，我必须做些什么来解决这个问题？任何帮助或想法将不胜感激......

预先感谢您的帮助

4

1 回答 1

1

你是对的，<StaticImage>至少现在，不接受props来自它的父母，正如你在gatsby-plugin-image文档中看到的那样：

使用 StaticImage 的限制

将 props 传递到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}>
}

// ⚠️ Doesn't work
export function Dino() {
    // Props can't come from function calls
    const width = getTheWidthFromSomewhere();
    return <StaticImage src="trex.png" width={width}>
}

<StaticImage>因此，总而言之，您无法使用组件创建来自外部源的动态图像。如果您可以下载它并将其上传到您的 CMS，您将能够使用<GatsbyImage>组件使用动态图像：

 <GatsbyImage image={image} alt={``} />
于 2021-03-12T10:16:57.060 回答