GatsbyImage 用于从 json 文件中读取的 url

Posted 2023-03-08

【中文标题】GatsbyImage 用于从 json 文件中读取的 url

【英文标题】：GatsbyImage for urls read from a json file

【发布时间】：2021-06-11 16:49:21

【问题描述】：

我有一个 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>
      ))
    </>

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

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 可用。有变化吗？

【参考方案1】：

目前，您不能将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>
    </>

这将避免消息：

我对空图像使用后备网址。

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

【讨论】：

无论如何我都需要渲染图像，所以我使用了备用图像。我在构建之前运行了一个脚本，该脚本从各种 rest 和 graphql api 中提取所述数据。我当然可以预先下载所说的图片，而不仅仅是有网址。这有什么帮助吗？

如果图像“预缓存”属于项目（内部路由）并且 Gatsby 可以使用它们的解析器和转换器处理它们，您将能够使用gatsby-plugin-image，否则，您将需要使用标准的<img> 标签，我添加了一个解决方法以避免错误消息。

所以即使我预先下载了图片也没有运气？

取决于何时下载这些图像。你当然可以试试看它的表现如何

因为我在开始构建之前调用了一个 fetch 脚本。这些文件将在 Gatsby build 被调用之前可用。如果图像在本地可用，我将如何加载它？