我目前正在尝试将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: ""
gatsby-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/': ``, }, }) ) }, }
另外,这里将节点中的绝对路径转换为相对路径
gatsby-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
无法解析文件路径的配置问题?