Graphql 盖茨比图形阅读图像
我想从YAML读取图像文件的路径,并使用Graphql 盖茨比图形阅读图像,graphql,gatsby,Graphql,Gatsby,我想从YAML读取图像文件的路径,并使用gatsby图像创建响应图像,但它不允许我做我想做的事情 data.yaml fileKey: data profile: - name: Foo image: image.jpg - name: Bar image: image2.jpg 我的查询如下所示: query DataQuery { pagesYaml(fileKey: {eq: "data"}) { profile { name
gatsby图像
创建响应图像,但它不允许我做我想做的事情
data.yaml
fileKey: data
profile:
- name: Foo
image: image.jpg
- name: Bar
image: image2.jpg
我的查询如下所示:
query DataQuery {
pagesYaml(fileKey: {eq: "data"}) {
profile {
name
image {
childImageSharp {
fluid(maxWidth: 2048, quality: 100) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
这导致出现此错误字段“image”不能有选择,因为类型“String”没有子字段
然而,下面的方法是有效的
query DataQuery {
pagesYaml(fileKey: {eq: "data"}) {
profile {
name
}
profileImage: file(relativePath: { eq: "image.jpg" }) {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
profileImage2: file(relativePath: { eq: "image2.jpg" }) {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
第一个查询的好处是,我可以将概要文件图像放在概要文件
中,因此更容易用JavaScript管理数据。是否可以将图像放置在查询中的profile
对象中
这是我的gatsby config.js
。图像存储在src/img/
中
const proxy = require('http-proxy-middleware');
const yaml = require('./src/yaml');
module.exports = {
siteMetadata: {
title: 'Gatsby + Netlify CMS Starter',
description:
'This repo contains an example business website that is built with Gatsby, and Netlify CMS.It follows the JAMstack architecture by using Git as a single source of truth, and Netlify for continuous deployment, and CDN distribution.',
},
plugins: [
'gatsby-plugin-react-helmet',
{
resolve: 'gatsby-plugin-robots-txt',
options: {
policy: [{ userAgent: '*', disallow: '/' }]
}
},
{
resolve: `gatsby-plugin-sitemap`,
options: {
exclude: [`/admin`]
}
},
'gatsby-plugin-sass',
'gatsby-transformer-yaml',
{
// keep as first gatsby-source-filesystem plugin for gatsby image support
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/static/img`,
name: 'uploads',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/pages`,
name: 'pages',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/img`,
name: 'images',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/data`,
name: 'data',
},
},
'gatsby-plugin-sharp',
'gatsby-transformer-sharp',
{
resolve: 'gatsby-transformer-remark',
options: {
engines: { yaml },
plugins: [
{
resolve: 'gatsby-remark-relative-images',
options: {
name: 'uploads',
},
},
{
resolve: 'gatsby-remark-images',
options: {
// It's important to specify the maxWidth (in pixels) of
// the content container as this plugin uses this as the
// base for generating different widths of each image.
maxWidth: 2048,
},
},
{
resolve: 'gatsby-remark-copy-linked-files',
options: {
destinationDir: 'static',
},
},
],
},
},
{
resolve: 'gatsby-plugin-web-font-loader',
options: {
custom: {
families: ['Appli Mincho']
}
}
},
{
resolve: 'gatsby-plugin-netlify-cms',
options: {
modulePath: `${__dirname}/src/cms/cms.js`,
},
},
{
resolve: 'gatsby-plugin-purgecss', // purges all unused/unreferenced css rules
options: {
develop: true, // Activates purging in npm run develop
purgeOnly: ['/all.sass'], // applies purging only on the bulma css file
},
}, // must be after other CSS plugins
'gatsby-plugin-netlify', // make sure to keep it last in the array
],
// for avoiding CORS while developing Netlify Functions locally
// read more: https://www.gatsbyjs.org/docs/api-proxy/#advanced-proxying
developMiddleware: app => {
app.use(
'/.netlify/functions/',
proxy({
target: 'http://localhost:9000',
pathRewrite: {
'/.netlify/functions/': '',
},
})
)
},
}
这可能是因为盖茨比将您的
profile.image
字段推断为字符串而不是文件。如果在引导Gatsby时提供的一个或多个路径字符串未解析为文件,则可能发生这种情况。请注意,Gatsby在引导后不会对现有字段重新运行类型推断,因此您需要重新启动开发服务器以获取这些更改。我再次检查了它,但它仍然不起作用。我是通过gatsby config.js
粘贴的。如果你的data.yml
在src/data
中,而你的图像在src/img
中,那么你的profile.image
字段应该看起来像。/img/image.jpg
,而不是image.jpg
。谢谢,这很有效,但是必须指定相对于yml位置的路径应该是不必要的。我设置了gatsby源文件系统
插件来指定映像文件夹,所以我不需要这样做。这里缺少什么?另外,如果我使用gatsby transformer rewrak
查询图像,我不需要在static
文件夹中相对于标记文件位置查询图像。所以,奇怪的是,在这种情况下,我需要一个相对于文件位置的路径..我想我找到了。我认为它适用于gatsby transformer remark
,因为这个插件gatsby remark relative images
。谢谢