Angular: Как определить направление изображения после просмотра или когда я получаю изображения из базы данных?

Question

Я пытаюсь сделать небольшой набор изображений, центрированных и обрезанных, поэтому я получаю из базы данных.Я нашел эту информацию о том, как это сделать: https://aaronparecki.com/2016/08/13/4/css-thumbnails

Этот ресурс написан для javascript, и я использую Angular 7. Итак, у меня возникают проблемы с определением, портретное изображение или нет.

Я пытался добавить портрет класса, когда я получаю все фотографии перед загрузкой на страницу, но проблема в том, что это путь, который я получаю из базы данных, поэтому я создал объект Image.Код таков:

 getPhotosUser(page) {
    this._photoService.getPhotosUser(this.user.id, page).subscribe(
      response => {
        this.photos = response.objects

     var addImageOrientationClass = function (img) {
      var imgObject = new Image();
      imgObject.src = img;
      if(imgObject.naturalHeight > imgObject.naturalWidth){
        img.classList.add("portrait")
      }
    }

    this.photos.forEach(function (value: any) {
      console.log("PHTOOOSOASAOSIA")
      value.path = environment.api.replace('/api', '/') + value.path.replace('app/', '');
      addImageOrientationClass(value.path)
    })
  }
)
}

Я получаю следующую ошибку:

ОШИБКА TypeError: Невозможно прочитать свойство 'add' из неопределенного

Я также пытался поместить это или что-то подобное в afterview, но я не получаю значения для изображений (как пример в ресурсе выше).В резюме мой код выглядит так:

  ngAfterViewInit() {
     var addImageOrientationClass = function (img) {
       console.log(typeof(img))
       if (img.naturalHeight > img.naturalWidth) {
         img.classList.add("portrait")
       }
     }
     var images = document.querySelectorAll("thumbnail img");
     images.forEach(function (value: any){
       if (value.complete){
         addImageOrientationClass(value)
       }else{
         value.addEventListener("load", function(evt){
          addImageOrientationClass(evt.target)
         })
       }
     })
  }

Изображения пусты, и для этого у меня нет изображения, если кто-то может мне помочь или рассказал мне о библиотеке, полезной для этого.

Заранее спасибо.

Answer 1

Позвольте мне кратко изложить вашу проблему, поэтому вам необходимо загрузить изображения из базы данных и отобразить их в виде миниатюр, по центру и обрезать.

Итак, основная идея реализации:

a)Эскиз: просто оберните тег изображения внутри тега привязки, он будет отображен в виде миниатюры

b) По центру и обрезке: используйте тот же самый css, документ, на который вы ссылаетесь.

c) Для динамической загрузки изображений:

 1) Create placeholders for anchor->image tag  nested inside your photos array
 2) map image source dynamically : <img [src]="urlVariable" />

PS: Код javascript, который вы указали, предназначен только для ориентации. Если вы хотите динамически создавать элементы Image и отображать их в Angular, вы можете ссылаться на:

радиально-визуализатор