diff --git a/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts b/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts index b6ed871cd190c..b97353c0be060 100644 --- a/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts +++ b/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts @@ -814,7 +814,8 @@ function assertNonEmptyWidthAndHeight(dir: NgOptimizedImage) { `${imgDirectiveDetails(dir.ngSrc)} these required attributes ` + `are missing: ${missingAttributes.map(attr => `"${attr}"`).join(', ')}. ` + `Including "width" and "height" attributes will prevent image-related layout shifts. ` + - `To fix this, include "width" and "height" attributes on the image tag.`); + `To fix this, include "width" and "height" attributes on the image tag or turn on ` + + `"fill" mode with the \`fill\` attribute.`); } } diff --git a/packages/common/test/directives/ng_optimized_image_spec.ts b/packages/common/test/directives/ng_optimized_image_spec.ts index 943e0babbede7..1e7cff14fee06 100644 --- a/packages/common/test/directives/ng_optimized_image_spec.ts +++ b/packages/common/test/directives/ng_optimized_image_spec.ts @@ -344,7 +344,8 @@ describe('Image directive', () => { 'element with the `ngSrc="img.png"`) has detected that these ' + 'required attributes are missing: "width", "height". Including "width" and ' + '"height" attributes will prevent image-related layout shifts. ' + - 'To fix this, include "width" and "height" attributes on the image tag.'); + 'To fix this, include "width" and "height" attributes on the image tag or turn on ' + + '"fill" mode with the `fill` attribute.'); }); it('should throw if `width` is not set', () => { @@ -360,7 +361,8 @@ describe('Image directive', () => { 'element with the `ngSrc="img.png"`) has detected that these ' + 'required attributes are missing: "width". Including "width" and ' + '"height" attributes will prevent image-related layout shifts. ' + - 'To fix this, include "width" and "height" attributes on the image tag.'); + 'To fix this, include "width" and "height" attributes on the image tag or turn on ' + + '"fill" mode with the `fill` attribute.'); }); it('should throw if `width` is 0', () => { @@ -406,7 +408,8 @@ describe('Image directive', () => { 'element with the `ngSrc="img.png"`) has detected that these required ' + 'attributes are missing: "height". Including "width" and "height" ' + 'attributes will prevent image-related layout shifts. ' + - 'To fix this, include "width" and "height" attributes on the image tag.'); + 'To fix this, include "width" and "height" attributes on the image tag or turn on ' + + '"fill" mode with the `fill` attribute.'); }); it('should throw if `height` is 0', () => {