从 json 文件读取的 url 的 GatsbyImage

如何解决从 json 文件读取的 url 的 GatsbyImage

我有一个 json 文件，我正在从中加载数据以填充我的网页。例如，以下是我的 membersData.json

[
  {
    "name": "Person A","photoUrl": null
  },{
    "name": "Person B","photoUrl": "https://drive.google.com/uc?export=view&id=123456789012"
  }
]

我对空图片使用了备用网址。

我有一个页面 members.js

export default members = () => {
    return <>
      {data.map((entry,index) => (
        <Grid item xs={12} md={4} lg={3} key={index}>
          <MembersCard
            name={entry.name}
            photoUrl={entry.photoUrl}
          />
        </Grid>
      ))}
    </>
}

我的会员卡是一个卡片组件，它减去任何布局和样式返回

const MembersCard = (props) => {
    return <>
        <img src={props.photoUrl} alt= {props.name + " | Image"}/>
        <h1>{props.name}</h1>
    </>
}

因为我在编译时就知道所有图像。我想知道是否可以使用 gatsby-plugin-image 和 traced-svg 占位符来改善这些图像的糟糕加载时间，因为它们需要很长时间才能从谷歌驱动器加载。

编辑：我现在在构建之前在本地预取图像，并尝试通过 gatsby-node.js 将数据推送到 graphql。我找到了这个 article 并构建了一个类似的设置。

exports.sourceNodes = ({ actions,createNodeId,createContentDigest }) => {
  membersData.forEach( entry => {
    const {
      name,photoUrl
    } = entry;

    let imageName = name.replace(/\s+/g,'-').toLowerCase()
    let absolutePath = path.resolve(__dirname,IMAGE_PATH,`${imageName}.jpg`);

    const data = {
      imageName,ext: '.jpg',absolutePath,extension: 'jpg'
    };

    const imageNode = ( photoUrl && photoUrl.startsWith("https://drive.google.com") )? {
      ...data,id: createNodeId(`card-image-${name}`),internal: {
        type: 'MembersCardImage',contentDigest: createContentDigest(data)
      }
    } : null;

    imageNode && actions.createNode(imageNode);

    const node = {
      name,image: imageNode,id: createNodeId(`card-${name}`),internal: {
        type: 'MembersCard',contentDigest: createContentDigest(entry),},}

    actions.createNode(node);
  })
}

但是 gatsby-transformer-sharp 不能在我的图像上运行，并且图像字段上没有 childImageSharp 可用。有变化吗？

解决方法

目前，您不能将 gatsby-plugin-image 用于动态外包文件（如您的）。 -

<GatsbyImageData> 需要是实习图像，因为您需要允许 Gatsby 及其解析器处理图像。所以这不是您的选择，因为您使用的是外部图像。
<StaticImage>，正如您从 the docs 看到的，不接受动态 props：

使用 StaticImage

的限制

图像已加载并在构建时处理，因此您通过的方式有限制组件的道具。这些值需要在以下位置进行静态分析构建时间，这意味着您不能将它们作为道具从外部传递例如，组件，或使用函数调用的结果。您可以使用静态值或变量组件的本地范围。请参阅以下示例：

```
 // ⚠️ Doesn't work

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

```

但是，对于您的用例，我会尝试以下操作：

const MembersCard = (props) => {
    return <>
        {props.photoUrl && <img src={props.photoUrl} alt= {props.name + " | Image"}/>}
        <h1>{props.name}</h1>
    </>
}

这将避免消息：

我对空图片使用了备用网址。

因为如果不存在，您将不会渲染图像。