如何解决如何在图片网址中使用gatsby-image?
这是在index.js中显示图像的方式及其工作原理。 imgurl基本上是图像网址。
import React from 'react';
import { graphql } from 'gatsby';
export const query = graphql`
{
test {
imgurl
}
}
`;
export default function Home({ data }) {
console.log(data);
return (
<div>
Hello World!
<img src={data.test.imgurl} />
</div>
);
}
我想使用这样的盖茨比图像:
childImageSharp {
fixed(width: 600) {
...GatsbyImageSharpFixed
}
}
但是由于它不是本地存储的,我如何将gatsby image与图像的url一起使用?
解决方法
我通过安装名为gatsby-plugin-remote-images
{
resolve: `gatsby-plugin-remote-images`,options: {
nodeType: 'Test',// Created Node type name
imagePath: 'imgUrl' // The image url name in test node type
}
}
它下载imgUrl url并在Test节点类型上创建一个localImage字段,这样我们就可以在index.js文件中的gatsby中查询它:
import Img from 'gatsby-image';
export const query = graphql`
{
test {
localImage {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
`;
export default function Home({ data }) {
return (
<div>
Hello world!
<Img fluid={data.test.localImage.childImageSharp.fluid} />
</div>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。