[英]Gatsby gatsby-remark-relative-images does not convert yaml absolute image path to relative
I am currently trying to resolve an absolute path in yaml file to relative so it can be query using graphql in gatsby.我目前正在尝试将 yaml 文件中的绝对路径解析为相对路径,以便可以在 gatsby 中使用 graphql 进行查询。 The absolute path are provided from netlify-cms.绝对路径由 netlify-cms 提供。
When the same path are being placed in md file and uses gatsby-remark-relative-images
to convert it to relative path, it has no problem at all, but the same does not apply to yaml.相同的路径放在md文件中,使用gatsby-remark-relative-images
转换成相对路径时,完全没有问题,但同样不适用于yaml。
The image file are placed in static/img/
and the path provided by cms is /img/xxx.jpg
图片文件放在static/img/
,cms提供的路径是/img/xxx.jpg
src/data/pages/index.yaml src/data/pages/index.yaml
page: index
slider:
- image: /img/1_new.jpg
url: ""
- image: /img/2_new.jpg
url: ""
- image: /img/3_new.jpg
url: ""
gatsby-config.js盖茨比-config.js
module.exports = {
// ...
plugins: [
// ...
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/data`,
name: 'data',
},
},
{
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/assets/images`,
name: 'images',
},
},
{
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
include: /\.inline\.svg$/,
},
},
},
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
`gatsby-transformer-yaml-plus`,
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-relative-images',
options: {
name: 'uploads',
},
},
{
resolve: 'gatsby-remark-images',
options: {
maxWidth: 2048, // must specify max width container
},
},
{
resolve: `gatsby-remark-responsive-iframe`,
options: {
wrapperStyle: `margin-bottom: 1.0725rem`,
},
},
{
resolve: 'gatsby-remark-copy-linked-files',
options: {
destinationDir: 'static',
},
},
`gatsby-remark-smartypants`,
`gatsby-remark-widows`,
],
},
},
{
resolve: 'gatsby-plugin-netlify-cms',
options: {
modulePath: `${__dirname}/src/cms/cms.js`,
},
},
'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/': ``,
},
})
)
},
}
Also, here is where it convert the absolute path in node into relative path此外,这里是将节点中的绝对路径转换为相对路径的地方
gatsby-node.js盖茨比-node.js
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions
fmImagesToRelative(node) // convert image paths for gatsby images
if (node.internal.type === `MarkdownRemark`) {
const value = createFilePath({ node, getNode })
createNodeField({
name: `slug`,
node,
value,
})
}
}
Finally, here is where it define the netlify-cms configuration最后,这里是定义 netlify-cms 配置的地方
static/admin/config.yml静态/管理员/config.yml
backend:
name: git-gateway
branch: master
media_folder: static/img
public_folder: /img
collections:
- label: "Data"
name: "data"
files:
- name: "index"
label: "Index"
file: "src/data/pages/index.yml"
fields:
- {label: "Page", name: "page", widget: hidden, default: "index"}
- label: "Slider"
name: "slider"
widget: list
fields:
- {label: "Image", name: "image", widget: image}
- {label: "Url", name: "url", widget: string, required: false}
Error Message错误信息
ERROR
GraphQL Error Field "image" must not have a selection since type "String" has no subfields.
file: /home/gaara/JS/iconic-starter-netlify-cms/src/pages/index.js
1 |
2 | query IndexPage {
3 | pagesYaml(page: { eq: "index" }) {
4 | id
5 | slider {
6 | desktop {
> 7 | image {
| ^
8 | childImageSharp {
9 | fluid(maxWidth: 2000, quality: 90) {
10 | aspectRatio
11 | presentationWidth
12 | src
13 | srcSet
14 | sizes
15 | }
16 | }
17 | }
⠙ extract queries from components
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I had already made sure that all the image exists inside the static/img/
folder.我已经确保所有图像都存在于static/img/
文件夹中。 I had also made several attempt in restarting the server so to avoid image not loading issue.我还多次尝试重新启动服务器,以避免图像不加载问题。 The image path that given from netlify-cms should stay as /img/xxx.jpg
because there is a lot of other markdown files uses it and has no problem in resolving the path.从 netlify-cms 给出的图像路径应该保留为/img/xxx.jpg
,因为有很多其他 markdown 文件使用它并且解析路径没有问题。
May I know is there any configuration problem which I did wrong or miss out that causing the gatsby-remark-relative-images
not being able to resolve the file path?我可以知道是否有任何配置问题我做错或错过导致gatsby-remark-relative-images
无法解析文件路径?
gatsby-remark-relative-images
is a plugin that only works with markdown files handled by gatsby-transformer-remark
. gatsby-remark-relative-images
是一个插件,仅适用于gatsby-transformer-remark
处理的 markdown 文件。
The recent-ish graphql schema customization update allows new solution that's independent of file types.最近的 graphql 架构自定义更新允许独立于文件类型的新解决方案。 You can explore the official docs on the topic here: Customize the Graphql Schema (gatsby docs)您可以在此处浏览有关该主题的官方文档: Customize the Graphql Schema (gatsby docs)
Instead modifying the image paths before gatsby gets to it (like with gatsby-remark-relative-images), we'd customize the graphql schema so that the image field ( slider.desktop.image
in your case) resolves to the image file node instead.相反,在 gatsby 到达之前修改图像路径(如使用 gatsby-remark-relative-images),我们将自定义 graphql 模式,以便图像字段(在您的情况下为slider.desktop.image
)解析为图像文件节点反而。
Please note that the node types below are just loose examples & you should go to your graphiql endpoint (ie localhost:8000/graphiql
) to find the correct type names.请注意,下面的节点类型只是松散的示例,您应该 go 到您的 graphiql 端点(即localhost:8000/graphiql
)以找到正确的类型名称。
exports.createSchemaCustomization = ({ actions }) => {
const { createTypes, createFieldExtension } = actions
createFieldExtension({
name: 'fileByStaticPath',
extend: () => ({
resolve: (src, args, ctx, info) => {
// look up original string value
const { fieldName } = info
const partialPath = src[fieldName]
// TODOS
// - join path to create the correct image file path
// - query the file node with `context.nodeModel.runQuery`
// - return the file node if exists
}
})
})
const typeDefs = `
type YamlSliderDesktop @infer {
image: File @fileByStaticPath
}
type YamlSlider @infer {
desktop: YamlSliderDesktop
}
type PagesYaml implements Node @infer {
slider: YamlSlider
}
`
createTypes(typeDefs)
}
I found myself doing this pretty often, so I wrote a plugin for it: gatsby-schema-field-absolute-path (github) .我发现自己经常这样做,所以我为它写了一个插件: gatsby-schema-field-absolute-path (github) 。
I also wrote a bit more in depth about this over here on my blog ( byderek.com ), but really, nothing that you won't find in the Gatsby official docs, just explained in a different language.我还在我的博客 ( byderek.com ) 上对此进行了更深入的介绍,但实际上,在 Gatsby 官方文档中找不到任何内容,只是用不同的语言进行了解释。
Hope it helps!希望能帮助到你!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.