<picture *ngIf="image" class="al-image-container">
<source
*ngFor="let imageFormat of image.imageTypes"
[srcset]="imageFormat.imageSizes.source"
[type]="imageFormat.type"
[media]="imageFormat.imageSizes.mediaQuerySize"
>
<img
class="al-image"
[src]="defaultImageSrc"
[alt]="(image.alt || '') | translate"
>
</picture>
const imageConfigObject: AlImage = {
imageTypes: [
{
imageSizes: [
{
source: `${imagesFolderPath}/webp/${imageName}.webp`,
mediaQuerySize: MediaQuerySize.DESKTOP,
default: false,
},
{
source: `${imagesFolderPath}/webp/${imageName}.webp`,
mediaQuerySize: MediaQuerySize.LAPTOP_L,
default: false,
},
{
source: `${imagesFolderPath}/webp/${imageName}.webp`,
mediaQuerySize: MediaQuerySize.LAPTOP,
default: false,
},
{
source: `${imagesFolderPath}/webp/${imageName}.webp`,
mediaQuerySize: MediaQuerySize.TABLET,
default: false,
},
{
source: `${imagesFolderPath}/webp/${imageName}.webp`,
mediaQuerySize: MediaQuerySize.MOBILE,
default: false,
},
],
type: ImageType.WEBP,
default: false,
},
{
imageSizes: [
{
source: `${imagesFolderPath}/webp/${imageName}.webp`,
mediaQuerySize: MediaQuerySize.DESKTOP,
default: false,
},
{
source: `${imagesFolderPath}/webp/${imageName}.webp`,
mediaQuerySize: MediaQuerySize.LAPTOP_L,
default: false,
},
{
source: `${imagesFolderPath}/webp/${imageName}.webp`,
mediaQuerySize: MediaQuerySize.LAPTOP,
default: false,
},
{
source: `${imagesFolderPath}/webp/${imageName}.webp`,
mediaQuerySize: MediaQuerySize.TABLET,
default: false,
},
{
source: `${imagesFolderPath}/webp/${imageName}.webp`,
mediaQuerySize: MediaQuerySize.MOBILE,
default: false,
},
],
type: imageExt === 'png' ? ImageType.PNG : ImageType.JPEG,
default: true,
},
],
alt,
};
export enum ImageType {
WEBP = 'image/webp',
JPEG = 'image/jpeg',
PNG = 'image/png',
}
export enum MediaQuerySize {
DESKTOP = '(max-width: 1920px)',
LAPTOP_L = '(max-width: 1440px)',
LAPTOP = '(max-width: 1024px)',
TABLET = '(max-width: 768px)',
MOBILE = '(max-width: 425px)',
}
export interface AlImageType {
type: ImageType;
default?: boolean;
imageSizes: AlImageSize[];
}
export interface AlImageSize {
source: string;
mediaQuerySize: MediaQuerySize;
default?: boolean;
}
export interface AlImage {
imageTypes: AlImageType[];
alt?: string;
}
Здравствуйте! В данный момент не могу получить ключи source и mediaQuerySize, которые нужно засэтать в тэмлпейт, как можно пофиксить данную проблему??
[srcset]="imageFormat.imageSizes.source"
[media]="imageFormat.imageSizes.mediaQuerySize"