Javascript 具有动态图像源的可重用盖茨比图像组件
我正在考虑在我的下一个项目中使用盖茨比图像,并且一直在玩弄它 我让它在我的测试项目中工作,但后来我提出了一个用例,我想使用来自盖茨比的,非常像一个普通的Javascript 具有动态图像源的可重用盖茨比图像组件,javascript,reactjs,graphql,gatsby,Javascript,Reactjs,Graphql,Gatsby,我正在考虑在我的下一个项目中使用盖茨比图像,并且一直在玩弄它 我让它在我的测试项目中工作,但后来我提出了一个用例,我想使用来自盖茨比的,非常像一个普通的标记。因此,我的问题是如何使盖茨比组件可重用 import React from "react" import { StaticQuery, graphql } from "gatsby" import Img from "gatsby-image" function renderImage({ file }) { console.log({
标记。因此,我的问题是如何使盖茨比组件可重用
import React from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
function renderImage({ file }) {
console.log({ file })
return <Img fluid={file.childImageSharp.fluid} />
}
// Stateless Image component which i guess will recieve src value as a prop?
// Returns a StaticQuery component with query prop and render prop. Query prop has the graphql query to recieve the images and render prop returns a renderImage function which in return, returns a Img component från Gatsby with set attributes.
const Image = () => (
<StaticQuery
query={graphql`
query {
file(relativePath: { eq: "gatsby-astronaut.png" }) {
childImageSharp {
fluid(maxWidth: 300) {
...GatsbyImageSharpFluid
}
}
}
}
`}
// render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
render={renderImage}
/>
)
export default Image
从“React”导入React
从“盖茨比”导入{StaticQuery,graphql}
从“盖茨比图像”导入Img
函数呈现({file}){
console.log({file})
返回(
我在文档中读到,静态查询不能获取变量——只能获取页面。但我不希望我的图像与页面关联——我想在任何地方使用这个组件——就像普通的img标记一样
希望我已经说清楚了。如果你有任何问题,请询问
这是一个例子:
先谢谢你,
埃里克我也一直在寻找这个答案。希望这能回答你的问题:
最终代码:
从“React”导入React;
从“gatsby”导入{StaticQuery,graphql};
从“盖茨比图像”导入Img;
//注意:您可以将“图像”更改为您想要的任何内容。
const Image=props=>(
{
const image=data.images.edges.find(n=>{
返回n.node.relativePath.includes(props.filename);
});
如果(!图像){
返回null;
}
//const imageSizes=image.node.childImageSharp.size;size={imageSizes}
返回;
}}
/>
);
导出默认图像;
使用图像:
import Image from '../components/Image';
<div style={{ maxWidth: `300px` }}>
<Image alt="Gatsby in Space" filename="gatsby-astronaut.png" />
</div>
从“../components/Image”导入图像;
解释
由于StaticQuery在其模板文本中不支持字符串插值,因此我们无法真正向其传递任何道具。相反,我们将尝试在StaticQuery的呈现部分中检查道具
警告
我不确定这是否会影响编译时间,因为我们正在扫描所有图像。如果会,请让我知道
更新:如果您有许多图像,由于此解决方案扫描所有图像,因此包的大小可能会变得相当大
进一步定制
如果没有传递道具,可以调整代码以显示占位符图像
选择
虽然如此,但需要更多的工作/代码
来源
- 我修改了中的代码。(请注意,本文使用的是不推荐使用的代码。)
不幸的是,从我所能收集到的信息来看,最好的解决方案是为图像编写单独的js文件
在@RodrigoLeon的方法中,这将导致捆绑包的大小急剧增加。特别是如果你有50多个图像。因为任何时候你使用它并循环浏览所有图像,你都会在组件文件中创建对它们的引用。因此我不建议这样做。我正在构建的网站是一个有你的电子商务平台大量图像(针对所有产品)。这是使用gatsby查询图像时遇到的一个主要问题。很长一段时间以来,我有一个组件查询所有图像并将其与各自的产品进行匹配。(如本文所述)这是非常低效的,会对查询的持续时间发出警告
另一种方法是在数据级别将图像文件附加到产品,而不是在尝试渲染时
src/gatsbyapi/create resolvers/index.js
const解析器={
AWU产品:{
图像文件:{
键入:“文件”,
解析:异步(源、参数、上下文、信息)=>{
const node=wait context.nodeModel.runQuery({
查询:{
过滤器:{
键:{eq:source.image1}
}
},
类型:“S3Object”,
firstOnly:对
});
if(node&&node.imageFile)返回node.imageFile;
}
},
},
}
module.exports={
解析器
}
gatsby-node.js
exports.createResolvers=async({createResolvers})=>{
CreateResolver(解析程序)
}
src/components/image/index.js
从“React”导入React
从“盖茨比图像”导入Img
导出常量图像=道具=>{
if(props.imageFile&&props.imageFile.childImageSharp&&props.imageFile.childImageSharp.fluid){
返回;
}
};
然后像这样使用它:
awsapsync\u Product
是我要将文件附加到的节点类型。(可在本地主机上的graphql游乐场中找到)。解析将使S3Object
的键与image1
匹配(这是一个字符串)这允许我直接使用产品图像,而不必在图像组件内部运行查询
在我看来,这是一条非常有价值的信息,一旦你仔细考虑了它,它肯定对我有很大帮助。如果你将Wordpress与WP GraphQL结合使用,并希望动态加载一些帖子,你将面临同样的问题。你将无法使用诸如降低质量和使用粗糙的base64等强大的预处理功能占位符。正如前面提到的@RodrigoLeon解决方案可以工作,但如果你的网站最终以图像形式增长,你将面临巨大的负载
因为我的网站会有很多帖子,并且会动态加载这些帖子,所以我必须想出一个至少可以接受的解决方案。我最终要做的是生成childImageSharp(并提供一个通用的base64占位符)对于我网站的动态部分,因此我可以始终将childImageSharp
传递给{
if(allowedSizes.indexOf(size.name)>=0){
如果(
size.width==`${fluid.presentationWidth}`
) {
fluid.src=size.sourceUrl;
}
srcSets.push(`${size.sourceUrl}${size.width}w`);
}
});
fluid.srcSet=srcSets.join(“,\n”);
}否则{
console.warn(“无法附加动态图像:缺少m
featuredImage {
node {
sourceUrl
mediaDetails {
file
width
height
sizes {
file
name
width
sourceUrl
}
}
}
}