src是gatsby插件镜像问题中的道具

Question

大家好，

我需要帮助，因为我很难使用gatsby插件图像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->内容：

{
"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，我必须做些什么来修复它呢？任何帮助或想法都将不胜感激。。。。

提前感谢您对的帮助

Answer 1

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

使用StaticImage的限制

传递道具的方式有一些技术限制转换为CCD_ 4。最重要的是，您不能使用任何父项组件的支柱。有关更多信息，请参阅盖茨比图片插件参考指南。如果你发现自己希望使用从图像src的父级传递的prop，那么很可能您应该使用动态图像。

扩展文档链接：

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