javascript - 在 Contentful + Angular 应用程序中渲染来自条目的图像

Question

问题:

1. 如何访问 includes 数组以便获取图像 URL 来渲染图像？ (或者如何让图像总体渲染)
2. 为什么我的 description 字段未呈现？

所以我有一个内容丰富的服务，可以获取所有条目:

  //get all exhibits
  getExhibits(query?: object): Promise<Entry<any>[]> {
    return this.cdaClient.getEntries(Object.assign({
      include : 2,
      content_type: CONFIG.contentTypeIds.exhibit
    }, query))
      .then(res => res.items);
  }

上面的函数在我的 Gallery 组件中被调用，如下所示:

  ngOnInit() {
    this.contentfulService.getExhibits()
    .then(exhibits => this.exhibits = exhibits);
  }

数据以相应的 HTML 形式呈现，如下所示:

<section class="gallery__section" [class.menu--open]="menu.isMenuClosed" *ngFor="let exhibit of exhibits">
	<figure>
		<img src="{{ exhibit.fields.file.url }}" alt="">
    <!-- HOW DO I GET THE IMG URL -->
	</figure>
	<div class="gallery__text">
		<h2 class="gallery__heading">Gallery</h2>
		<p class="gallery__title">{{ exhibit.fields.title }}</p>
		<h3 class="gallery__artist">{{ exhibit.fields.artist }}</h3>
		<p class="gallery_onview">On View</p>
		<p class="gallery__dates">{{ exhibit.fields.date }}</p>
		<p class="gallery__description" *ngIf="exhibit.fields.description.content[0].content[0].value">{{ exhibit.fields.description.content[0].content[0].value }}</p>
	</div>
</section>

Bellow 是 items 数组中的一个 item 的 JSON:

这里的图像应该是上述item的一部分，但被放置在一个名为includes的不同数组中:

下面是一个展览的 console.log 输出:

Answer 1

您不需要访问 includes 数组。 Contentful SDK 将自动解析包含引用的字段。

对于您的图像问题，我认为您缺少文件字段的字段名称:exhibit.fields.YOUR_FIELD_NAME.fields.file.url

对于您的描述字段，我建议使用 ngx-contentful-rich-text将富文本解析为 HTML。