从 Contentful + Angular 应用中的条目渲染图像

Question

问题：

如何访问 includes 数组以便获取图像 url 来渲染图像？（或者我如何让图像进行一般渲染）
为什么我的 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>

下面是一个item items数组的JSON：

这里的图像应该是上面 item 的一部分，但被放置在另一个名为 includes:

的数组中

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

Answer 1

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

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

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

从 Contentful + Angular 应用中的条目渲染图像

Render images from Entries in Contenful + Angular app

javascript

typescript

contentful

angular