问题描述
我有一个 json 文件,我正在从中加载数据以填充我的网页。例如,以下是我的 membersData.json
[
{
"name": "Person A","photoUrl": null
},{
"name": "Person B","photoUrl": "https://drive.google.com/uc?export=view&id=123456789012"
}
]
我对空图片使用了备用网址。
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>
</>
}
这将避免消息:
我对空图片使用了备用网址。
因为如果不存在,您将不会渲染图像。