Рендеринг изображений из записей в приложении Contenful + Angular - PullRequest
0 голосов
/ 02 апреля 2020

Проблемы:

  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);
  }

Вышеупомянутая функция вызывается в моем компоненте галереи следующим образом:

  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>

Ниже - JSON одного item массива items:

enter image description here

А здесь изображение, которое должно быть частью вышеуказанного item, но помещено в другой массив, называемый includes:

enter image description here

Ниже представлена ​​console.log продукция одного экспоната:

enter image description here

1 Ответ

1 голос
/ 02 апреля 2020

Вам не нужно обращаться к массиву includes. Contentful SDK автоматически разрешит поля, содержащие ссылку.

Для вашей проблемы с изображением, я думаю, вы пропустили имя поля для вашего файла: exhibit.fields.YOUR_FIELD_NAME.fields.file.url

Для вашего описания В поле я бы рекомендовал использовать ngx-contentful-rich-text для разбора расширенного текста в HTML.

...