[英]Gatsby gatsby-remark-relative-images does not convert yaml absolute image path to relative
我目前正在尝试将 yaml 文件中的绝对路径解析为相对路径,以便可以在 gatsby 中使用 graphql 进行查询。 绝对路径由 netlify-cms 提供。
相同的路径放在md文件中,使用gatsby-remark-relative-images
转换成相对路径时,完全没有问题,但同样不适用于yaml。
图片文件放在static/img/
,cms提供的路径是/img/xxx.jpg
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: ""
盖茨比-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/': ``,
},
})
)
},
}
此外,这里是将节点中的绝对路径转换为相对路径的地方
盖茨比-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,
})
}
}
最后,这里是定义 netlify-cms 配置的地方
静态/管理员/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
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.
我已经确保所有图像都存在于static/img/
文件夹中。 我还多次尝试重新启动服务器,以避免图像不加载问题。 从 netlify-cms 给出的图像路径应该保留为/img/xxx.jpg
,因为有很多其他 markdown 文件使用它并且解析路径没有问题。
我可以知道是否有任何配置问题我做错或错过导致gatsby-remark-relative-images
无法解析文件路径?
gatsby-remark-relative-images
是一个插件,仅适用于gatsby-transformer-remark
处理的 markdown 文件。
最近的 graphql 架构自定义更新允许独立于文件类型的新解决方案。 您可以在此处浏览有关该主题的官方文档: Customize the Graphql Schema (gatsby docs)
相反,在 gatsby 到达之前修改图像路径(如使用 gatsby-remark-relative-images),我们将自定义 graphql 模式,以便图像字段(在您的情况下为slider.desktop.image
)解析为图像文件节点反而。
请注意,下面的节点类型只是松散的示例,您应该 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)
}
我发现自己经常这样做,所以我为它写了一个插件: gatsby-schema-field-absolute-path (github) 。
我还在我的博客 ( byderek.com ) 上对此进行了更深入的介绍,但实际上,在 Gatsby 官方文档中找不到任何内容,只是用不同的语言进行了解释。
希望能帮助到你!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.