从json文件读取的URL的GatsbyImage

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

membersData.json

[
{
“姓名”：“个人A”，
“photoUrl”：空
},
{
“姓名”：“B人”，
“photoUrl”：https://drive.google.com/uc?export=view&id=123456789012"
}
]

我对空图像使用回退url

我有一个页面

members.js

导出默认成员=（）=>{
返回
{data.map（（条目，索引）=>(
))}
}

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

const MembersCard=（道具）=>{
返回
{props.name}
}

因为我在编译时知道所有的图像。我想知道是否有可能使用gatsby插件图像和跟踪svg占位符来改善这些图像的糟糕加载时间，因为它们需要很长时间才能从google drive加载

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

exports.sourceNodes=（{actions，createNodeId，createContentDigest}）=>{
membersData.forEach（条目=>{
常数{
名称
照片网址
}=入口；
让imageName=name.replace（/\s+/g，'-'）。toLowerCase（）
让absolutePath=path.resolve（uuu dirname，IMAGE_upath，`${imageName}.jpg`）；
常数数据={
imageName，
分机：'.jpg'，
绝对路径，
分机：“jpg”
};
const imageNode=（photoUrl&&photoUrl.startsWith（“https://drive.google.com") )? {
…数据，
id:createNodeId（`card image-${name}`），
内部：{
类型：“MembersCardImage”，
contentDigest:createContentDigest（数据）
}
}：null；
imageNode&&actions.createNode（imageNode）；
常量节点={
名称
image:imageNode，
id:createNodeId（`card-${name}`），
内部：{
类型：“MembersCard”，
contentDigest:createContentDigest（条目），
},
}
actions.createNode（节点）；
})
}

---

然而盖茨比变形金刚夏普并没有在我的图像上运行，也没有childImageSharp在图像领域可用。有什么变化吗？

目前，您不能将

gatsby插件图像

用于动态外包文件（如您的文件）-

• 必须是实习生映像，因为您需要允许盖茨比及其解析器处理映像。因此，这不是您的选项，因为您使用的是外部图像
• 从中可以看出，
  不接受动态

  道具

  ：

使用

静态图像的限制

图像将被加载并保存 在构建时处理，因此对传递方式有限制 组件的道具。这些值需要在以下位置进行静态分析： 建造时间，这意味着你不能将它们作为道具从外部传递 组件，或使用函数调用的结果。 您可以使用静态值，也可以使用 组件的局部作用域。请参见以下示例：

```
// ⚠️ 不起作用
导出函数徽标（{Logo}）{
//不能使用传递到父组件中的道具
返回
}
```

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

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

const MembersCard=（道具）=>{
返回
{props.photoUrl&&}
{props.name}
}

这将避免出现以下信息：

我对空图像使用回退url

---

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

无论发生什么情况，我都需要渲染图像，因此我使用回退图像。我有一个在构建之前运行的脚本，它从各种rest和GraphQLAPI中提取所述数据。我当然可以预先下载所说的图片，而不只是有网址。这会有任何帮助吗？如果图像“precached”属于项目（内部路由），并且盖茨比可以使用其解析器和转换器处理它们，则您将能够使用

Gatsby plugin image

，否则，您将需要使用标准的

标记，我已经添加了一个解决方法来避免错误消息。因此，即使我预下载了这些图像，也没有运气？这取决于这些图像何时被下载。当然，您可以尝试检查它的行为，因为我甚至在开始构建之前就调用了一个获取脚本。这些文件将在调用盖茨比构建之前可用。如果图像在本地可用，我将如何加载它？

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