AlexLevonenia 28 авг 2022 в 10:00

Использование директивы NgOptimizedImage для реализации загрузки изображений в Angular

2 мин

4.3K

Перевод

Директива NgOptimizedImage в Angular отвечает за реализацию загрузки изображений, сохраняя высокую производительность. Она доступна в Angular v14.2.0. Директива помечена как standalone и может быть импортирована в standalone компоненты и модули.

Чтобы ее использовать, мы должны заменить атрибут src Вашего изображения на rawSrc:

import { NgOptimizedImage } from '@angular/common';

@Component({
  standalone: true,
  imports: [NgOptimizedImage],
  template: `
    <!-- видимая область страницы -->
    <img rawSrc="https://picsum.photos/200/300" width="200" height="300" priority />
    
    <!-- ниже видимой области страницы -->
    <img rawSrc="https://picsum.photos/300/300" 
        style="margin-top: 300vh" 
        width="300" 
        height="300" />`,
})
export class LoginPageComponent {}

Директива предоставит нам следующие преимущества LCP(Скорость загрузки основного контента):

Атрибут loading для изображений ниже видимой области страницы будет установлен на lazy, в то время как атрибут loading для изображений в видимой области страницы будет eager.
Она гарантирует приоритетность для изображений в видимой области страницы. Это значит, что будет установлено значение high для атрибута fetchpriority. Значение по умолчанию — default.
Она гарантирует, что изображения в видимой области страницы будут иметь соответствующий тег preconnect.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>MyNgApp</title>
  <base href="/">
  <!-- ?? ?? ?? ?? ?? ?? -->
  <link rel="preconnect" href="https://picsum.photos">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <app-root></app-root>
</body>

</html>

Она гарантирует, что ширина и высота будут установлены таким образом, чтобы предотвращались сдвиги макета.

Слово «гарантирует» означает, что директива предупредит Вас, если это не так.

Загрузчики изображений

Загрузчик — это функция, которая генерирует соответствующий URL-адрес ресурса для данного файла изображения. Загрузчик по умолчанию возвращает src, который мы передаем для rawSrc. Также Angular предоставляет различные загрузчики для сторонних сервисов изображений:

Cloudflare Image Resizing
Сloudinary
ImageKit
Imgix

Чтобы их использовать, мы должны передать фабрику провайдеров для выбранного сервиса в массив провайдеров:

import { NgOptimizedImage, provideImgixLoader } from '@angular/common';

NgModule({
  providers: [
    provideImgixLoader("https://my.base.url/", {
      ensurePreconnect: boolean
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Мы можем создать собственный загрузчик, переопределив провайдер IMAGE_LOADER:

import { ImageLoaderConfig, IMAGE_LOADER, NgOptimizedImage } from '@angular/common';

@NgModule({
  providers: [{ 
    provide: IMAGE_LOADER, 
    useValue: (config: ImageLoaderConfig) => { 
      return `https://example.com/images?src=${config.src}&width=${config.width}` } 
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Дополнительная информация про API:

Angular

next.angular.io

Теги:

Хабы:

Использование директивы NgOptimizedImage для реализации загрузки изображений в Angular

Загрузчики изображений

Публикации

Истории

Работа

Ближайшие события