Contentful富文本嵌入资产仅返回ID无URL问题求助

你用NodeJS中间件聚合Contentful内容时，富文本字段里的嵌入图片只返回ID、没有URL，用@contentful/rich-text-html-renderer处理也只能拿到段落内容？问题根源是Contentful默认不会自动展开富文本里的嵌入资产链接，得按下面两步处理：

1. 获取Contentful内容时，显式解析资产链接 #

Contentful的API默认不会返回嵌套链接的完整数据，必须在请求时通过include参数指定要展开的链接层级。如果是用Contentful Delivery SDK，在getEntries时加上这个参数：

const contentful = require('contentful');
const client = contentful.createClient({
  space: '你的Space ID',
  accessToken: '你的访问令牌'
});

client.getEntries({
  content_type: '你的内容类型ID',
  include: 2 // 至少设为1，确保展开富文本里的嵌入资产
})
.then(entries => {
  // 此时返回的条目里，富文本的embedded_asset会包含完整的资产数据
})
.catch(err => console.error(err));

2. 修改富文本转HTML的逻辑，提取图片URL #

当资产数据被完整返回后，node.data.target里会有fields字段，包含图片的文件地址和元信息。修改你的Angular代码如下：

import { documentToHtmlString } from '@contentful/rich-text-html-renderer';
import { BLOCKS } from '@contentful/rich-text-types';

_returnHtmlFromRichText(richText) {
  return documentToHtmlString(richText, {
    renderNode: {
      [BLOCKS.EMBEDDED_ASSET]: (node) => {
        const asset = node.data.target;
        // 从资产的file字段里取URL，注意要补全https前缀
        const imageUrl = `https:${asset.fields.file.url}`;
        // 用资产的标题作为alt文本，没有的话用默认值
        const altText = asset.fields.title || '图片';
        return `<img src="${imageUrl}" alt="${altText}" />`;
      }
    }
  });
}

这样处理后，富文本里的嵌入图片就能正确生成带URL的<img>标签了。

内容的提问来源于stack exchange，提问作者EugeneDeWaal