如何在Gatsby插件图像中传递图像路径作为Gatsby中的道具

Question

我正试图将图像的路径作为道具传递给组件

注意：组件和索引页都可以通过相同的路径访问图像。当我作为道具通过路径时，它不起作用

在下面的代码中，我尝试了GatbsyImage和StaticImage标签，但似乎都无法通过

index.js

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import '../styles/index.scss';
import Main from  '../Layouts/main';
import ImageOverlay from '../components/ImageOverlay';
import { StaticImage } from "gatsby-plugin-image"
function Home(){
// Home page images
return (
<Main >
<section className="home_page">
<ImageOverlay path="../images/home/places/portblair.png"> </ImageOverlay>
</section>
</Main>
)
}
export default Home

components/ImageOverlay.js

import React from 'react';
import { GatsbyImage, StaticImage } from "gatsby-plugin-image"
const ImageOverlay = ({path}) =>{
return(
<div>
<GatsbyImage image={path}></GatsbyImage>
<StaticImage src={path}></StaticImage>
</div> 

)
}
export default ImageOverlay;

我使用了GatsbyImage和StaticImage来检查

感谢提前提供的帮助

Answer 1

不能在StaticImage上使用外部props，这是一个已知的限制：

使用StaticImage的限制

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

并扩展参考指南：

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

如果您想使用StaticImage，解决方案是使用静态方法，直接附加src：

import React from 'react';
import { GatsbyImage, StaticImage } from "gatsby-plugin-image"
const ImageOverlay = ({path}) =>{
return(
<div>
<StaticImage src={`../images/home/places/portblair.png`}></StaticImage>
</div> 

)
}
export default ImageOverlay;

如果你想使用GatsbyImage，你需要查询你的图像以获得正确的数据：

import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
function Home({ data }) {
const image = getImage(data.blogPost.avatar)
return (
<section>
<GatsbyImage image={image} alt={data.blogPost.author} />
<p>{data.blogPost.body}</p>
</section>
)
}
export const pageQuery = graphql`
query {
blogPost(id: { eq: $Id }) {
title
body
author
avatar {
childImageSharp {
gatsbyImageData(
width: 200
placeholder: BLURRED
formats: [AUTO, WEBP, AVIF]
)
}
}
}
}
`

注意：当然，根据您的需要调整片段，但要了解想法

如果要使用动态图像，则必须进行GraphQL查询，以允许Gatsby及其转换器解析和解析图像。您可以使用一组可用的过滤器为您的图像创建特定的查询，使用relativePath和absolutePath，在localhost:8000/___graphql测试查询。

Answer 2

虽然不能将src作为字符串从父组件传递给StaticImage，但仍然可以传递StaticImage:

组件

…
const ImageOverlay = ({staticImage}) =>{
return <div>
{staticImage('myClass')}
</div> 
}
export default ImageOverlay;

母公司(消费者(

…
const ImageOverlay = ({path}) =>{
return <div>
<ImageOverlay
staticImage={className => <StaticImage
className={className}
src="../images/home/places/portblair.png"
alt="Portblair"
/>}
</div> 
}

Answer 3

有时，将图像路径作为道具传递给GatsbyImage和StaticImage标记的组件。并且没有显示图像有一些原因。

1. 图像路径问题

my-gatsby-project/
│
├── src/
│   ├── components/
│   │   ├── Image_overlay/
│   │       ├── ImageOverlay.js
│   │       └── (other components...)
│   │
│   ├── images/
│   │   ├── image.jpg
│   │   └── (other images...)
│   │
│   ├── pages/
│   │   ├── index.js
│   │   └── (other pages...)
│   │
│   └── (other project files...)
│
├── gatsby-config.js
├── package.json
├── (other project files...)

当您在src/pages/index.js中使用图像时，您将使用图像路径作为

../images/image.jpg 

而在ImageOverlay.js文件中，您将用作

../../images/image.jpg 

这可以解决，如果你在项目中使用绝对路径，那么在两个文件中，你都可以通过这个路径访问图像

images/image.jpg 

2. 你不能在StaticImage上使用道具，因为有一些技术限制。关于这些限制，你可以阅读

如果您从DB中获取图像作为查询，那么您可以将其作为道具传递，并使用GatsbyImage标记在组件中访问它。