From 2e2937eefe7bc2544658fcfa82193d0bd684fd7c Mon Sep 17 00:00:00 2001 From: Deepak Paul Date: Sun, 5 Mar 2023 21:50:53 +0530 Subject: [PATCH 1/3] docs: add new image directive in angular v15 --- .../snippets/v15-new-image-directive.mdx | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 src/pages/snippets/v15-new-image-directive.mdx diff --git a/src/pages/snippets/v15-new-image-directive.mdx b/src/pages/snippets/v15-new-image-directive.mdx new file mode 100644 index 0000000..06d686b --- /dev/null +++ b/src/pages/snippets/v15-new-image-directive.mdx @@ -0,0 +1,27 @@ +--- +title: New Image Directive in Angular v15 +description: "Example of New Image Directive in Angular 15 " +tags: ["angular15", "image directive"] # comma separated list which gets trimmed +pubDate: Mar 5, 2023 +contributedBy: "@deepakrudrapaul" +--- + +Here is a quick example of how to use the _NgOptimizedImage_ directive. +The _NgOptimizedImage_ directive makes it easy to adopt performance best practices for loading images. + +### Import NgOptimizedImage + +```typescript +import { NgOptimizedImage } from "@angular/common"; +``` + +### Enable the directive + +To enable the NgOptimizedImage directive, replace your image's src attribute with _ngSrc_ and to prevent image related layout shifts, +NgOptimizedImage requires that you specify a height and width for the image. + +```html + +``` + +--- From d47701c0d413f202b9017fe51e1f17962f95633d Mon Sep 17 00:00:00 2001 From: Deepak Paul Date: Sun, 5 Mar 2023 22:38:17 +0530 Subject: [PATCH 2/3] added example for using the fill attribute --- src/pages/snippets/v15-new-image-directive.mdx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/pages/snippets/v15-new-image-directive.mdx b/src/pages/snippets/v15-new-image-directive.mdx index 06d686b..47a3026 100644 --- a/src/pages/snippets/v15-new-image-directive.mdx +++ b/src/pages/snippets/v15-new-image-directive.mdx @@ -18,10 +18,18 @@ import { NgOptimizedImage } from "@angular/common"; ### Enable the directive To enable the NgOptimizedImage directive, replace your image's src attribute with _ngSrc_ and to prevent image related layout shifts, -NgOptimizedImage requires that you specify a height and width for the image. +NgOptimizedImage requires that you specify a height and width for the image ```html ``` +And if you don't know the size of the images, you can use the _fill_ attribute to inherit the size of the parent container. +For the "fill" image to render properly, its parent element must be styled with +`position: "relative", position: "fixed", or position: "absolute".` + +```html + +``` + --- From 3d3cdf239d3c0fb5cf7600d836135e16d9fcdd1f Mon Sep 17 00:00:00 2001 From: Deepak Paul Date: Tue, 7 Mar 2023 20:49:23 +0530 Subject: [PATCH 3/3] changed quick to simple --- src/pages/snippets/v15-new-image-directive.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/snippets/v15-new-image-directive.mdx b/src/pages/snippets/v15-new-image-directive.mdx index 47a3026..b57960e 100644 --- a/src/pages/snippets/v15-new-image-directive.mdx +++ b/src/pages/snippets/v15-new-image-directive.mdx @@ -6,7 +6,7 @@ pubDate: Mar 5, 2023 contributedBy: "@deepakrudrapaul" --- -Here is a quick example of how to use the _NgOptimizedImage_ directive. +Here is a simple example of how to use the _NgOptimizedImage_ directive. The _NgOptimizedImage_ directive makes it easy to adopt performance best practices for loading images. ### Import NgOptimizedImage