如何使用Gatsby从内容丰富的文本字段调用和使用嵌入式资产？
提问于 2019-04-06 15:24:00
我使用盖茨比作为启动我的反应应用程序。为了处理内容，我使用的是内容。
在我的内容模型中，我创建了以下内容类型：
- 短文
- 短文
- 媒体
- 丰富文本
- 丰富文本
使用gatsby的gatsby contenful插件和@contentful/gatsby-transformer-contentful-richtext插件，我成功地呈现了所有这些内容类型，除了在我的富文本类型中，我无法在其中呈现嵌入的资产。
我尝试通过npm安装@contentful/富文本类型，并根据Gatsby文档在这里发现的中的示例使用常量MARK和INLINES。
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>`,
},
},
},
},理想情况下，我希望Gatbsy将富文本类型中的图像资产自动呈现为<img src="[ASSET URL]" alt="[ASSET DESCRIPTION]">
回答 1
Stack Overflow用户
发布于 2019-04-19 16:49:35
试试这个：
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} />
},
},这似乎适用于我，虽然图像似乎是全尺寸，加载相当缓慢。需要额外的工作，但这似乎确实有效(至少在开发中)。
编辑：
当我发送graphql查询时，我的fields属性似乎不再出现在我的node.data.target上。而这个停止了..。超级怪诞
编辑2:如果删除.cache文件夹(project-root/.cache)，上述问题就会得到解决。https://github.com/gatsbyjs/gatsby/issues/10592
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55554313
复制相关文章
【Java】 NullPointerException、ArrayIndexOutOfBoundsException、ClassCastException、ArrayIndexOutOfBoundsE
腾讯云开发者
