我正在使用盖茨比作为我的反应应用的首发。处理内容我使用的是Contentful。
在我的Contentful Content Model中,我创建了以下内容类型:
使用Gatsby的gatsby-source-contenful和@intentful / gatsby-transformer-contentful-richtext插件,我已经成功渲染了所有这些内容类型,除了我的Rich Text类型,我无法在其中呈现嵌入式资源。
我已经尝试通过npm安装@ contentful / rich-text-types并使用常量MARK和INLINES基于Gatsby文档中的示例found here
const { MARKS, INLINES } = require('@contentful/rich-text-types')
{
resolve: `@contentful/gatsby-transformer-contentful-richtext`,
options: {
renderOptions: {
/*
* Defines custom html string for each node type like heading, embedded entries etc..
*/
renderNode: {
// Example
[INLINES.ASSET_HYPERLINK]: node => {
return `<img class='custom-asset' src="${
node.data.target.fields.file['en-US'].url
}"/>`
},
[INLINES.EMBEDDED_ENTRY]: node => {
return `<div class='custom-entry' />${
node.data.target.fields.name['en-US']
}</div>`
},
},
/*
* Defines custom html string for each mark type like bold, italic etc..
*/
renderMark: {
// Example
[MARKS.BOLD]: text => `<strong>${text}<strong>`,
},
},
},
},
理想情况下,我希望Gatsby能够将富文本类型中的图像资源自动渲染为qazxsw poi
试试这个:
<img src="[ASSET URL]" alt="[ASSET DESCRIPTION]">
这似乎对我有用,虽然图像似乎是全尺寸的,并且加载相当慢。需要额外的工作,但这似乎有效(至少在开发中)
编辑:
当我发送我的graphql查询时,似乎我的const { BLOCKS } = require('@contentful/rich-text-types')
...
renderNode: {
[BLOCKS.EMBEDDED_ASSET]: node => {
// console.log(node)
let { description, title, file } = node.data.target.fields
// console.log(file["en-US"].url)
return <img src={file["en-US"].url} />
},
},
上的fields
属性停止出现......这停止了工作...超级离奇
编辑2:如果你删除node.data.target
文件夹(.cache
),上述问题得到修复。 project-root/.cache