Директива 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:
ссылка на оригинал статьи https://habr.com/ru/post/685018/
Добавить комментарий