src 作为 gatsby-plugin-image 问题中的道具

问题描述

大家好，

我需要帮助，因为我在使用带有道具的 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;

这里是我使用 Trailer 和调用 Query 的组件：

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})，我得到： 字符串：'https://catlike-prod.com/wp-content/uploads/2017/01/post-partum.jpg'

如果我使用经典的 html5 ：

效果很好，我可以渲染图像

那么我需要做些什么来解决这个问题才能使用 StaticImage？ 任何帮助或想法将不胜感激....

提前感谢您的帮助

解决方法

您是对的，<StaticImage> 至少现在不接受来自其父级的 props，正如您在 gatsby-plugin-image docs 中看到的：

使用 StaticImage 的限制

传递道具的方式有一些技术限制 进入StaticImage。最重要的是，您不能使用任何父级 组件的道具。有关详细信息，请参阅 Gatsby Image plugin reference guide。如果您发现自己希望可以使用 prop 从父级传递给图像 src 那么你很可能 应该使用动态图片。

扩展documentation's link：

// ⚠️ 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={``} />