From ca7bf6593380fa760891d29fba5c9f61c6e9bf8b Mon Sep 17 00:00:00 2001 From: Andrew Kushnir Date: Tue, 6 Sep 2022 12:51:20 -0700 Subject: [PATCH] fix(common): rename `rawSrc` -> `ngSrc` in NgOptimizedImage directive (#47362) As an ongoing effort to stabilize the NgOptimizedImage API before existing the Developer Preview, this commit renames the `rawSrc` attribute used for the NgOptimizedImage selector matching to `ngSrc`. The `rawSrcset` is also renamed to `ngSrcset` for consistency. The motivation for this change is to align the attribute name better with other built-in directives, such as `ngFor`, `ngIf`, `ngClass`, `ngStyle`, etc. Note: this is technically a breaking change, but since the NgOptimizedImage directive is in the Developer Preview mode, we land the change in a patch branch. PR Close #47362 --- aio/content/guide/image-directive-setup.md | 2 +- aio/content/guide/image-directive.md | 18 +- goldens/public-api/common/index.md | 8 +- .../ng_optimized_image/error_helper.ts | 8 +- .../image_loaders/image_loader.ts | 6 +- .../ng_optimized_image/lcp_image_observer.ts | 14 +- .../ng_optimized_image/ng_optimized_image.ts | 147 +++++----- .../preconnect_link_checker.ts | 8 +- .../directives/ng_optimized_image_spec.ts | 259 +++++++++--------- .../test/image_loaders/image_loader_spec.ts | 4 +- .../image-directive/e2e/basic/basic.ts | 2 +- .../image-distortion.e2e-spec.ts | 10 +- .../e2e/image-distortion/image-distortion.ts | 40 +-- .../e2e/lcp-check/lcp-check.ts | 6 +- .../e2e/oversized-image/oversized-image.ts | 10 +- .../e2e/preconnect-check/preconnect-check.ts | 6 +- .../bundling/image-directive/playground.ts | 4 +- 17 files changed, 296 insertions(+), 256 deletions(-) diff --git a/aio/content/guide/image-directive-setup.md b/aio/content/guide/image-directive-setup.md index af5a28a1029f4..3edf81f2527ce 100644 --- a/aio/content/guide/image-directive-setup.md +++ b/aio/content/guide/image-directive-setup.md @@ -93,4 +93,4 @@ providers: [ A loader function for the `NgOptimizedImage` directive takes an object with the `ImageLoaderConfig` type (from `@angular/common`) as its argument and returns the absolute URL of the image asset. The `ImageLoaderConfig` object contains the `src`and `width` properties. -Note: a custom loader must support requesting images at various widths in order for `rawSrcset` to work properly. +Note: a custom loader must support requesting images at various widths in order for `ngSrcset` to work properly. diff --git a/aio/content/guide/image-directive.md b/aio/content/guide/image-directive.md index b1db651da7d23..743f1417ba80a 100644 --- a/aio/content/guide/image-directive.md +++ b/aio/content/guide/image-directive.md @@ -25,11 +25,11 @@ You will need to import the directive into your application. In addition, you wi ### Overview -To activate the `NgOptimizedImage` directive, replace your image's `src` attribute with `rawSrc`. +To activate the `NgOptimizedImage` directive, replace your image's `src` attribute with `ngSrc`. -<img rawSrc="cat.jpg" width="400" height="200"> +<img ngSrc="cat.jpg" width="400" height="200"> @@ -43,7 +43,7 @@ Always mark the [LCP image](https://web.dev/lcp/#what-elements-are-considered) o -<img rawSrc="cat.jpg" width="400" height="200" priority> +<img ngSrc="cat.jpg" width="400" height="200" priority> @@ -84,21 +84,21 @@ You can typically fix this by adding `height: auto` or `width: auto` to your ima ### Handling `srcset` attributes -If your `` tag defines a `srcset` attribute, replace it with `rawSrcset`. +If your `` tag defines a `srcset` attribute, replace it with `ngSrcset`. -<img rawSrc="hero.jpg" rawSrcset="100w, 200w, 300w"> +<img ngSrc="hero.jpg" ngSrcset="100w, 200w, 300w"> -If the `rawSrcset` attribute is present, `NgOptimizedImage` generates and sets the [`srcset` attribute](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset) using the configured image loader. Do not include image file names in `rawSrcset` - the directive infers this information from `rawSrc`. The directive supports both width descriptors (e.g. `100w`) and density descriptors (e.g. `1x`) are supported. +If the `ngSrcset` attribute is present, `NgOptimizedImage` generates and sets the [`srcset` attribute](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset) using the configured image loader. Do not include image file names in `ngSrcset` - the directive infers this information from `ngSrc`. The directive supports both width descriptors (e.g. `100w`) and density descriptors (e.g. `1x`) are supported. -You can also use `rawSrcset` with the standard image [`sizes` attribute](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes). +You can also use `ngSrcset` with the standard image [`sizes` attribute](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes). -<img rawSrc="hero.jpg" rawSrcset="100w, 200w, 300w" sizes="50vw"> +<img ngSrc="hero.jpg" ngSrcset="100w, 200w, 300w" sizes="50vw"> @@ -108,7 +108,7 @@ By default, `NgOptimizedImage` sets `loading=lazy` for all images that are not m -<img rawSrc="cat.jpg" width="400" height="200" loading="eager"> +<img ngSrc="cat.jpg" width="400" height="200" loading="eager"> diff --git a/goldens/public-api/common/index.md b/goldens/public-api/common/index.md index 92f535578d68a..fe00556bf0e77 100644 --- a/goldens/public-api/common/index.md +++ b/goldens/public-api/common/index.md @@ -545,16 +545,18 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy { ngOnDestroy(): void; // (undocumented) ngOnInit(): void; + ngSrc: string; + ngSrcset: string; set priority(value: string | boolean | undefined); // (undocumented) get priority(): boolean; - rawSrc: string; - rawSrcset: string; + // @deprecated + set rawSrc(value: string); set width(value: string | number | undefined); // (undocumented) get width(): number | undefined; // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration; + static ɵdir: i0.ɵɵDirectiveDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } diff --git a/packages/common/src/directives/ng_optimized_image/error_helper.ts b/packages/common/src/directives/ng_optimized_image/error_helper.ts index 130024cfe8099..faa5601c95d62 100644 --- a/packages/common/src/directives/ng_optimized_image/error_helper.ts +++ b/packages/common/src/directives/ng_optimized_image/error_helper.ts @@ -7,8 +7,8 @@ */ // Assembles directive details string, useful for error messages. -export function imgDirectiveDetails(rawSrc: string, includeRawSrc = true) { - const rawSrcInfo = - includeRawSrc ? `(activated on an element with the \`rawSrc="${rawSrc}"\`) ` : ''; - return `The NgOptimizedImage directive ${rawSrcInfo}has detected that`; +export function imgDirectiveDetails(ngSrc: string, includeNgSrc = true) { + const ngSrcInfo = + includeNgSrc ? `(activated on an element with the \`ngSrc="${ngSrc}"\`) ` : ''; + return `The NgOptimizedImage directive ${ngSrcInfo}has detected that`; } diff --git a/packages/common/src/directives/ng_optimized_image/image_loaders/image_loader.ts b/packages/common/src/directives/ng_optimized_image/image_loaders/image_loader.ts index 59a687e7b03fc..0b861890b990e 100644 --- a/packages/common/src/directives/ng_optimized_image/image_loaders/image_loader.ts +++ b/packages/common/src/directives/ng_optimized_image/image_loaders/image_loader.ts @@ -118,10 +118,10 @@ function throwUnexpectedAbsoluteUrlError(path: string, url: string): never { throw new RuntimeError( RuntimeErrorCode.INVALID_LOADER_ARGUMENTS, ngDevMode && - `Image loader has detected a \`\` tag with an invalid \`rawSrc\` attribute: ${ + `Image loader has detected a \`\` tag with an invalid \`ngSrc\` attribute: ${ url}. ` + - `This image loader expects \`rawSrc\` to be a relative URL - ` + + `This image loader expects \`ngSrc\` to be a relative URL - ` + `however the provided value is an absolute URL. ` + - `To fix this, provide \`rawSrc\` as a path relative to the base URL ` + + `To fix this, provide \`ngSrc\` as a path relative to the base URL ` + `configured for this loader (\`${path}\`).`); } diff --git a/packages/common/src/directives/ng_optimized_image/lcp_image_observer.ts b/packages/common/src/directives/ng_optimized_image/lcp_image_observer.ts index e13c75c608228..6e620fc552b57 100644 --- a/packages/common/src/directives/ng_optimized_image/lcp_image_observer.ts +++ b/packages/common/src/directives/ng_optimized_image/lcp_image_observer.ts @@ -27,7 +27,7 @@ import {getUrl} from './url'; */ @Injectable({providedIn: 'root'}) export class LCPImageObserver implements OnDestroy { - // Map of full image URLs -> original `rawSrc` values. + // Map of full image URLs -> original `ngSrc` values. private images = new Map(); // Keep track of images for which `console.warn` was produced. private alreadyWarned = new Set(); @@ -65,8 +65,8 @@ export class LCPImageObserver implements OnDestroy { // Exclude `data:` and `blob:` URLs, since they are not supported by the directive. if (imgSrc.startsWith('data:') || imgSrc.startsWith('blob:')) return; - const imgRawSrc = this.images.get(imgSrc); - if (imgRawSrc && !this.alreadyWarned.has(imgSrc)) { + const imgNgSrc = this.images.get(imgSrc); + if (imgNgSrc && !this.alreadyWarned.has(imgSrc)) { this.alreadyWarned.add(imgSrc); logMissingPriorityWarning(imgSrc); } @@ -75,9 +75,9 @@ export class LCPImageObserver implements OnDestroy { return observer; } - registerImage(rewrittenSrc: string, rawSrc: string) { + registerImage(rewrittenSrc: string, originalNgSrc: string) { if (!this.observer) return; - this.images.set(getUrl(rewrittenSrc, this.window!).href, rawSrc); + this.images.set(getUrl(rewrittenSrc, this.window!).href, originalNgSrc); } unregisterImage(rewrittenSrc: string) { @@ -93,8 +93,8 @@ export class LCPImageObserver implements OnDestroy { } } -function logMissingPriorityWarning(rawSrc: string) { - const directiveDetails = imgDirectiveDetails(rawSrc); +function logMissingPriorityWarning(ngSrc: string) { + const directiveDetails = imgDirectiveDetails(ngSrc); console.warn(formatRuntimeError( RuntimeErrorCode.LCP_IMG_MISSING_PRIORITY, `${directiveDetails} this image is the Largest Contentful Paint (LCP) ` + 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 c781fd87eccc8..fca335c95e4fa 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 @@ -83,8 +83,8 @@ const OVERSIZED_IMAGE_TOLERANCE = 1000; * Follow the steps below to enable and use the directive: * 1. Import it into the necessary NgModule or a standalone Component. * 2. Optionally provide an `ImageLoader` if you use an image hosting service. - * 3. Update the necessary `` tags in templates and replace `src` attributes with `rawSrc`. - * Using a `rawSrc` allows the directive to control when the `src` gets set, which triggers an image + * 3. Update the necessary `` tags in templates and replace `src` attributes with `ngSrc`. + * Using a `ngSrc` allows the directive to control when the `src` gets set, which triggers an image * download. * * Step 1: import the `NgOptimizedImage` directive. @@ -110,7 +110,7 @@ const OVERSIZED_IMAGE_TOLERANCE = 1000; * * To use the **default loader**: no additional code changes are necessary. The URL returned by the * generic loader will always match the value of "src". In other words, this loader applies no - * transformations to the resource URL and the value of the `rawSrc` attribute will be used as is. + * transformations to the resource URL and the value of the `ngSrc` attribute will be used as is. * * To use an existing loader for a **third-party image service**: add the provider factory for your * chosen service to the `providers` array. In the example below, the Imgix loader is used: @@ -150,10 +150,10 @@ const OVERSIZED_IMAGE_TOLERANCE = 1000; * ], * ``` * - * Step 3: update `` tags in templates to use `rawSrc` instead of `src`. + * Step 3: update `` tags in templates to use `ngSrc` instead of `src`. * * ``` - * + * * ``` * * @publicApi @@ -161,7 +161,7 @@ const OVERSIZED_IMAGE_TOLERANCE = 1000; */ @Directive({ standalone: true, - selector: 'img[rawSrc]', + selector: 'img[ngSrc],img[rawSrc]', }) export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy { private imageLoader = inject(IMAGE_LOADER); @@ -180,25 +180,48 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy { */ private _renderedSrc: string|null = null; + /** + * Previously, the `rawSrc` attribute was used to activate the directive. + * The attribute was renamed to `ngSrc` and this input just produces an error, + * suggesting to switch to `ngSrc` instead. + * + * This error should be removed in v15. + * + * @nodoc + * @deprecated Use `ngSrc` instead. + */ + @Input() + set rawSrc(value: string) { + if (ngDevMode) { + throw new RuntimeError( + RuntimeErrorCode.INVALID_INPUT, + `${imgDirectiveDetails(value, false)} the \`rawSrc\` attribute was used ` + + `to activate the directive. Newer version of the directive uses the \`ngSrc\` ` + + `attribute instead. Please replace \`rawSrc\` with \`ngSrc\` and ` + + `\`rawSrcset\` with \`ngSrcset\` attributes in the template to ` + + `enable image optimizations.`); + } + } + /** * Name of the source image. * Image name will be processed by the image loader and the final URL will be applied as the `src` * property of the image. */ - @Input() rawSrc!: string; + @Input() ngSrc!: string; /** * A comma separated list of width or density descriptors. - * The image name will be taken from `rawSrc` and combined with the list of width or density + * The image name will be taken from `ngSrc` and combined with the list of width or density * descriptors to generate the final `srcset` property of the image. * * Example: * ``` - * => + * => * * ``` */ - @Input() rawSrcset!: string; + @Input() ngSrcset!: string; /** * The intrinsic width of the image in pixels. @@ -249,7 +272,7 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy { /** * Value of the `src` attribute if set on the host `` element. * This input is exclusively read to assert that `src` is not set in conflict - * with `rawSrc` and that images don't start to load until a lazy loading strategy is set. + * with `ngSrc` and that images don't start to load until a lazy loading strategy is set. * @internal */ @Input() src?: string; @@ -257,15 +280,15 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy { /** * Value of the `srcset` attribute if set on the host `` element. * This input is exclusively read to assert that `srcset` is not set in conflict - * with `rawSrcset` and that images don't start to load until a lazy loading strategy is set. + * with `ngSrcset` and that images don't start to load until a lazy loading strategy is set. * @internal */ @Input() srcset?: string; ngOnInit() { if (ngDevMode) { - assertNonEmptyInput(this, 'rawSrc', this.rawSrc); - assertValidRawSrcset(this, this.rawSrcset); + assertNonEmptyInput(this, 'ngSrc', this.ngSrc); + assertValidNgSrcset(this, this.ngSrcset); assertNoConflictingSrc(this); assertNoConflictingSrcset(this); assertNotBase64Image(this); @@ -275,7 +298,7 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy { assertNoImageDistortion(this, this.imgElement, this.renderer); if (this.priority) { const checker = this.injector.get(PreconnectLinkChecker); - checker.assertPreconnect(this.getRewrittenSrc(), this.rawSrc); + checker.assertPreconnect(this.getRewrittenSrc(), this.ngSrc); } else { // Monitor whether an image is an LCP element only in case // the `priority` attribute is missing. Otherwise, an image @@ -283,7 +306,7 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy { if (this.lcpObserver !== null) { const ngZone = this.injector.get(NgZone); ngZone.runOutsideAngular(() => { - this.lcpObserver!.registerImage(this.getRewrittenSrc(), this.rawSrc); + this.lcpObserver!.registerImage(this.getRewrittenSrc(), this.ngSrc); }); } } @@ -302,7 +325,7 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy { // The `src` and `srcset` attributes should be set last since other attributes // could affect the image's loading behavior. this.setHostAttribute('src', this.getRewrittenSrc()); - if (this.rawSrcset) { + if (this.ngSrcset) { this.setHostAttribute('srcset', this.getRewrittenSrcset()); } } @@ -310,7 +333,7 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy { ngOnChanges(changes: SimpleChanges) { if (ngDevMode) { assertNoPostInitInputChange( - this, changes, ['rawSrc', 'rawSrcset', 'width', 'height', 'priority']); + this, changes, ['ngSrc', 'ngSrcset', 'width', 'height', 'priority']); } } @@ -330,7 +353,7 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy { // because if the developer uses rendered width instead of intrinsic width in the HTML width // attribute, the image requested may be too small for 2x+ screens. if (!this._renderedSrc) { - const imgConfig = {src: this.rawSrc}; + const imgConfig = {src: this.ngSrc}; // Cache calculated image src to reuse it later in the code. this._renderedSrc = this.imageLoader(imgConfig); } @@ -338,11 +361,11 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy { } private getRewrittenSrcset(): string { - const widthSrcSet = VALID_WIDTH_DESCRIPTOR_SRCSET.test(this.rawSrcset); - const finalSrcs = this.rawSrcset.split(',').filter(src => src !== '').map(srcStr => { + const widthSrcSet = VALID_WIDTH_DESCRIPTOR_SRCSET.test(this.ngSrcset); + const finalSrcs = this.ngSrcset.split(',').filter(src => src !== '').map(srcStr => { srcStr = srcStr.trim(); const width = widthSrcSet ? parseFloat(srcStr) : parseFloat(srcStr) * this.width!; - return `${this.imageLoader({src: this.rawSrc, width})} ${srcStr}`; + return `${this.imageLoader({src: this.ngSrc, width})} ${srcStr}`; }); return finalSrcs.join(', '); } @@ -386,9 +409,9 @@ function assertNoConflictingSrc(dir: NgOptimizedImage) { if (dir.src) { throw new RuntimeError( RuntimeErrorCode.UNEXPECTED_SRC_ATTR, - `${imgDirectiveDetails(dir.rawSrc)} both \`src\` and \`rawSrc\` have been set. ` + + `${imgDirectiveDetails(dir.ngSrc)} both \`src\` and \`ngSrc\` have been set. ` + `Supplying both of these attributes breaks lazy loading. ` + - `The NgOptimizedImage directive sets \`src\` itself based on the value of \`rawSrc\`. ` + + `The NgOptimizedImage directive sets \`src\` itself based on the value of \`ngSrc\`. ` + `To fix this, please remove the \`src\` attribute.`); } } @@ -400,43 +423,43 @@ function assertNoConflictingSrcset(dir: NgOptimizedImage) { if (dir.srcset) { throw new RuntimeError( RuntimeErrorCode.UNEXPECTED_SRCSET_ATTR, - `${imgDirectiveDetails(dir.rawSrc)} both \`srcset\` and \`rawSrcset\` have been set. ` + + `${imgDirectiveDetails(dir.ngSrc)} both \`srcset\` and \`ngSrcset\` have been set. ` + `Supplying both of these attributes breaks lazy loading. ` + `The NgOptimizedImage directive sets \`srcset\` itself based on the value of ` + - `\`rawSrcset\`. To fix this, please remove the \`srcset\` attribute.`); + `\`ngSrcset\`. To fix this, please remove the \`srcset\` attribute.`); } } /** - * Verifies that the `rawSrc` is not a Base64-encoded image. + * Verifies that the `ngSrc` is not a Base64-encoded image. */ function assertNotBase64Image(dir: NgOptimizedImage) { - let rawSrc = dir.rawSrc.trim(); - if (rawSrc.startsWith('data:')) { - if (rawSrc.length > BASE64_IMG_MAX_LENGTH_IN_ERROR) { - rawSrc = rawSrc.substring(0, BASE64_IMG_MAX_LENGTH_IN_ERROR) + '...'; + let ngSrc = dir.ngSrc.trim(); + if (ngSrc.startsWith('data:')) { + if (ngSrc.length > BASE64_IMG_MAX_LENGTH_IN_ERROR) { + ngSrc = ngSrc.substring(0, BASE64_IMG_MAX_LENGTH_IN_ERROR) + '...'; } throw new RuntimeError( RuntimeErrorCode.INVALID_INPUT, - `${imgDirectiveDetails(dir.rawSrc, false)} \`rawSrc\` is a Base64-encoded string ` + - `(${rawSrc}). NgOptimizedImage does not support Base64-encoded strings. ` + + `${imgDirectiveDetails(dir.ngSrc, false)} \`ngSrc\` is a Base64-encoded string ` + + `(${ngSrc}). NgOptimizedImage does not support Base64-encoded strings. ` + `To fix this, disable the NgOptimizedImage directive for this element ` + - `by removing \`rawSrc\` and using a standard \`src\` attribute instead.`); + `by removing \`ngSrc\` and using a standard \`src\` attribute instead.`); } } /** - * Verifies that the `rawSrc` is not a Blob URL. + * Verifies that the `ngSrc` is not a Blob URL. */ function assertNotBlobUrl(dir: NgOptimizedImage) { - const rawSrc = dir.rawSrc.trim(); - if (rawSrc.startsWith('blob:')) { + const ngSrc = dir.ngSrc.trim(); + if (ngSrc.startsWith('blob:')) { throw new RuntimeError( RuntimeErrorCode.INVALID_INPUT, - `${imgDirectiveDetails(dir.rawSrc)} \`rawSrc\` was set to a blob URL (${rawSrc}). ` + + `${imgDirectiveDetails(dir.ngSrc)} \`ngSrc\` was set to a blob URL (${ngSrc}). ` + `Blob URLs are not supported by the NgOptimizedImage directive. ` + `To fix this, disable the NgOptimizedImage directive for this element ` + - `by removing \`rawSrc\` and using a regular \`src\` attribute instead.`); + `by removing \`ngSrc\` and using a regular \`src\` attribute instead.`); } } @@ -449,17 +472,17 @@ function assertNonEmptyInput(dir: NgOptimizedImage, name: string, value: unknown if (!isString || isEmptyString) { throw new RuntimeError( RuntimeErrorCode.INVALID_INPUT, - `${imgDirectiveDetails(dir.rawSrc)} \`${name}\` has an invalid value ` + + `${imgDirectiveDetails(dir.ngSrc)} \`${name}\` has an invalid value ` + `(\`${value}\`). To fix this, change the value to a non-empty string.`); } } /** - * Verifies that the `rawSrcset` is in a valid format, e.g. "100w, 200w" or "1x, 2x". + * Verifies that the `ngSrcset` is in a valid format, e.g. "100w, 200w" or "1x, 2x". */ -export function assertValidRawSrcset(dir: NgOptimizedImage, value: unknown) { +export function assertValidNgSrcset(dir: NgOptimizedImage, value: unknown) { if (value == null) return; - assertNonEmptyInput(dir, 'rawSrcset', value); + assertNonEmptyInput(dir, 'ngSrcset', value); const stringVal = value as string; const isValidWidthDescriptor = VALID_WIDTH_DESCRIPTOR_SRCSET.test(stringVal); const isValidDensityDescriptor = VALID_DENSITY_DESCRIPTOR_SRCSET.test(stringVal); @@ -472,8 +495,8 @@ export function assertValidRawSrcset(dir: NgOptimizedImage, value: unknown) { if (!isValidSrcset) { throw new RuntimeError( RuntimeErrorCode.INVALID_INPUT, - `${imgDirectiveDetails(dir.rawSrc)} \`rawSrcset\` has an invalid value (\`${value}\`). ` + - `To fix this, supply \`rawSrcset\` using a comma-separated list of one or more width ` + + `${imgDirectiveDetails(dir.ngSrc)} \`ngSrcset\` has an invalid value (\`${value}\`). ` + + `To fix this, supply \`ngSrcset\` using a comma-separated list of one or more width ` + `descriptors (e.g. "100w, 200w") or density descriptors (e.g. "1x, 2x").`); } } @@ -486,7 +509,7 @@ function assertUnderDensityCap(dir: NgOptimizedImage, value: string) { RuntimeErrorCode.INVALID_INPUT, `${ imgDirectiveDetails( - dir.rawSrc)} the \`rawSrcset\` contains an unsupported image density:` + + dir.ngSrc)} the \`ngSrcset\` contains an unsupported image density:` + `\`${value}\`. NgOptimizedImage generally recommends a max image density of ` + `${RECOMMENDED_SRCSET_DENSITY_CAP}x but supports image densities up to ` + `${ABSOLUTE_SRCSET_DENSITY_CAP}x. The human eye cannot distinguish between image densities ` + @@ -503,7 +526,7 @@ function assertUnderDensityCap(dir: NgOptimizedImage, value: string) { function postInitInputChangeError(dir: NgOptimizedImage, inputName: string): {} { return new RuntimeError( RuntimeErrorCode.UNEXPECTED_INPUT_CHANGE, - `${imgDirectiveDetails(dir.rawSrc)} \`${inputName}\` was updated after initialization. ` + + `${imgDirectiveDetails(dir.ngSrc)} \`${inputName}\` was updated after initialization. ` + `The NgOptimizedImage directive will not react to this input change. ` + `To fix this, switch \`${inputName}\` a static value or wrap the image element ` + `in an *ngIf that is gated on the necessary value.`); @@ -517,12 +540,12 @@ function assertNoPostInitInputChange( inputs.forEach(input => { const isUpdated = changes.hasOwnProperty(input); if (isUpdated && !changes[input].isFirstChange()) { - if (input === 'rawSrc') { - // When the `rawSrc` input changes, we detect that only in the - // `ngOnChanges` hook, thus the `rawSrc` is already set. We use - // `rawSrc` in the error message, so we use a previous value, but + if (input === 'ngSrc') { + // When the `ngSrc` input changes, we detect that only in the + // `ngOnChanges` hook, thus the `ngSrc` is already set. We use + // `ngSrc` in the error message, so we use a previous value, but // not the updated one in it. - dir = {rawSrc: changes[input].previousValue} as NgOptimizedImage; + dir = {ngSrc: changes[input].previousValue} as NgOptimizedImage; } throw postInitInputChangeError(dir, input); } @@ -539,7 +562,7 @@ function assertGreaterThanZero(dir: NgOptimizedImage, inputValue: unknown, input if (!validNumber && !validString) { throw new RuntimeError( RuntimeErrorCode.INVALID_INPUT, - `${imgDirectiveDetails(dir.rawSrc)} \`${inputName}\` has an invalid value ` + + `${imgDirectiveDetails(dir.ngSrc)} \`${inputName}\` has an invalid value ` + `(\`${inputValue}\`). To fix this, provide \`${inputName}\` ` + `as a number greater than 0.`); } @@ -583,7 +606,7 @@ function assertNoImageDistortion( if (inaccurateDimensions) { console.warn(formatRuntimeError( RuntimeErrorCode.INVALID_INPUT, - `${imgDirectiveDetails(dir.rawSrc)} the aspect ratio of the image does not match ` + + `${imgDirectiveDetails(dir.ngSrc)} the aspect ratio of the image does not match ` + `the aspect ratio indicated by the width and height attributes. ` + `\nIntrinsic image size: ${intrinsicWidth}w x ${intrinsicHeight}h ` + `(aspect-ratio: ${intrinsicAspectRatio}). \nSupplied width and height attributes: ` + @@ -592,7 +615,7 @@ function assertNoImageDistortion( } else if (stylingDistortion) { console.warn(formatRuntimeError( RuntimeErrorCode.INVALID_INPUT, - `${imgDirectiveDetails(dir.rawSrc)} the aspect ratio of the rendered image ` + + `${imgDirectiveDetails(dir.ngSrc)} the aspect ratio of the rendered image ` + `does not match the image's intrinsic aspect ratio. ` + `\nIntrinsic image size: ${intrinsicWidth}w x ${intrinsicHeight}h ` + `(aspect-ratio: ${intrinsicAspectRatio}). \nRendered image size: ` + @@ -602,8 +625,8 @@ function assertNoImageDistortion( `image styling. To fix this, adjust image styling. In most cases, ` + `adding "height: auto" or "width: auto" to the image styling will fix ` + `this issue.`)); - } else if (!dir.rawSrcset && nonZeroRenderedDimensions) { - // If `rawSrcset` hasn't been set, sanity check the intrinsic size. + } else if (!dir.ngSrcset && nonZeroRenderedDimensions) { + // If `ngSrcset` hasn't been set, sanity check the intrinsic size. const recommendedWidth = RECOMMENDED_SRCSET_DENSITY_CAP * renderedWidth; const recommendedHeight = RECOMMENDED_SRCSET_DENSITY_CAP * renderedHeight; const oversizedWidth = (intrinsicWidth - recommendedWidth) >= OVERSIZED_IMAGE_TOLERANCE; @@ -611,7 +634,7 @@ function assertNoImageDistortion( if (oversizedWidth || oversizedHeight) { console.warn(formatRuntimeError( RuntimeErrorCode.OVERSIZED_IMAGE, - `${imgDirectiveDetails(dir.rawSrc)} the intrinsic image is significantly ` + + `${imgDirectiveDetails(dir.ngSrc)} the intrinsic image is significantly ` + `larger than necessary. ` + `\nRendered image size: ${renderedWidth}w x ${renderedHeight}h. ` + `\nIntrinsic image size: ${intrinsicWidth}w x ${intrinsicHeight}h. ` + @@ -619,7 +642,7 @@ function assertNoImageDistortion( recommendedHeight}h. ` + `\nNote: Recommended intrinsic image size is calculated assuming a maximum DPR of ` + `${RECOMMENDED_SRCSET_DENSITY_CAP}. To improve loading time, resize the image ` + - `or consider using the "rawSrcset" and "sizes" attributes.`)); + `or consider using the "ngSrcset" and "sizes" attributes.`)); } } }); @@ -635,7 +658,7 @@ function assertNonEmptyWidthAndHeight(dir: NgOptimizedImage) { if (missingAttributes.length > 0) { throw new RuntimeError( RuntimeErrorCode.REQUIRED_INPUT_MISSING, - `${imgDirectiveDetails(dir.rawSrc)} these required attributes ` + + `${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.`); @@ -650,7 +673,7 @@ function assertValidLoadingInput(dir: NgOptimizedImage) { if (dir.loading && dir.priority) { throw new RuntimeError( RuntimeErrorCode.INVALID_INPUT, - `${imgDirectiveDetails(dir.rawSrc)} the \`loading\` attribute ` + + `${imgDirectiveDetails(dir.ngSrc)} the \`loading\` attribute ` + `was used on an image that was marked "priority". ` + `Setting \`loading\` on priority images is not allowed ` + `because these images will always be eagerly loaded. ` + @@ -660,7 +683,7 @@ function assertValidLoadingInput(dir: NgOptimizedImage) { if (typeof dir.loading === 'string' && !validInputs.includes(dir.loading)) { throw new RuntimeError( RuntimeErrorCode.INVALID_INPUT, - `${imgDirectiveDetails(dir.rawSrc)} the \`loading\` attribute ` + + `${imgDirectiveDetails(dir.ngSrc)} the \`loading\` attribute ` + `has an invalid value (\`${dir.loading}\`). ` + `To fix this, provide a valid value ("lazy", "eager", or "auto").`); } diff --git a/packages/common/src/directives/ng_optimized_image/preconnect_link_checker.ts b/packages/common/src/directives/ng_optimized_image/preconnect_link_checker.ts index 63240e9bd3d76..264422a0733b4 100644 --- a/packages/common/src/directives/ng_optimized_image/preconnect_link_checker.ts +++ b/packages/common/src/directives/ng_optimized_image/preconnect_link_checker.ts @@ -96,9 +96,9 @@ export class PreconnectLinkChecker { * given src. * * @param rewrittenSrc src formatted with loader - * @param rawSrc rawSrc value + * @param originalNgSrc ngSrc value */ - assertPreconnect(rewrittenSrc: string, rawSrc: string): void { + assertPreconnect(rewrittenSrc: string, originalNgSrc: string): void { if (!this.window) return; const imgUrl = getUrl(rewrittenSrc, this.window); @@ -118,8 +118,8 @@ export class PreconnectLinkChecker { if (!this.preconnectLinks.has(imgUrl.origin)) { console.warn(formatRuntimeError( RuntimeErrorCode.PRIORITY_IMG_MISSING_PRECONNECT_TAG, - `${imgDirectiveDetails(rawSrc)} there is no preconnect tag present for this image. ` + - `Preconnecting to the origin(s) that serve priority images ensures that these ` + + `${imgDirectiveDetails(originalNgSrc)} there is no preconnect tag present for this ` + + `image. Preconnecting to the origin(s) that serve priority images ensures that these ` + `images are delivered as soon as possible. To fix this, please add the following ` + `element into the of the document:\n` + ` `)); diff --git a/packages/common/test/directives/ng_optimized_image_spec.ts b/packages/common/test/directives/ng_optimized_image_spec.ts index d5bb1a44fb2de..f50b20d73fd4b 100644 --- a/packages/common/test/directives/ng_optimized_image_spec.ts +++ b/packages/common/test/directives/ng_optimized_image_spec.ts @@ -14,7 +14,7 @@ import {expect} from '@angular/platform-browser/testing/src/matchers'; import {withHead} from '@angular/private/testing'; import {IMAGE_LOADER, ImageLoader, ImageLoaderConfig} from '../../src/directives/ng_optimized_image/image_loaders/image_loader'; -import {ABSOLUTE_SRCSET_DENSITY_CAP, assertValidRawSrcset, NgOptimizedImage, RECOMMENDED_SRCSET_DENSITY_CAP} from '../../src/directives/ng_optimized_image/ng_optimized_image'; +import {ABSOLUTE_SRCSET_DENSITY_CAP, assertValidNgSrcset, NgOptimizedImage, RECOMMENDED_SRCSET_DENSITY_CAP} from '../../src/directives/ng_optimized_image/ng_optimized_image'; import {PRECONNECT_CHECK_BLOCKLIST} from '../../src/directives/ng_optimized_image/preconnect_link_checker'; describe('Image directive', () => { @@ -25,7 +25,7 @@ describe('Image directive', () => { setupTestingModule(); - const template = ''; + const template = ''; TestBed.overrideComponent(TestComponent, {set: {template: template}}); const _document = TestBed.inject(DOCUMENT); @@ -71,7 +71,7 @@ describe('Image directive', () => { it('should always reflect the width/height attributes if bound', () => { setupTestingModule(); - const template = ''; + const template = ''; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -82,59 +82,74 @@ describe('Image directive', () => { }); describe('setup error handling', () => { - it('should throw if both `src` and `rawSrc` are present', () => { + it('should throw if both `src` and `ngSrc` are present', () => { setupTestingModule(); - const template = ''; + const template = ''; expect(() => { const fixture = createTestComponent(template); fixture.detectChanges(); }) .toThrowError( 'NG02950: The NgOptimizedImage directive (activated on an ' + - 'element with the `rawSrc="path/img.png"`) has detected that both ' + - '`src` and `rawSrc` have been set. Supplying both of these attributes ' + + 'element with the `ngSrc="path/img.png"`) has detected that both ' + + '`src` and `ngSrc` have been set. Supplying both of these attributes ' + 'breaks lazy loading. The NgOptimizedImage directive sets `src` ' + - 'itself based on the value of `rawSrc`. To fix this, please remove ' + + 'itself based on the value of `ngSrc`. To fix this, please remove ' + 'the `src` attribute.'); }); - it('should throw if both `rawSrc` and `srcset` is present', () => { + it('should throw if both `ngSrc` and `srcset` is present', () => { setupTestingModule(); const template = - ''; + ''; expect(() => { const fixture = createTestComponent(template); fixture.detectChanges(); }) .toThrowError( 'NG02951: The NgOptimizedImage directive (activated on an ' + - 'element with the `rawSrc="img-100.png"`) has detected that both ' + - '`srcset` and `rawSrcset` have been set. Supplying both of these ' + + 'element with the `ngSrc="img-100.png"`) has detected that both ' + + '`srcset` and `ngSrcset` have been set. Supplying both of these ' + 'attributes breaks lazy loading. ' + 'The NgOptimizedImage directive sets `srcset` itself based ' + - 'on the value of `rawSrcset`. To fix this, please remove the `srcset` ' + + 'on the value of `ngSrcset`. To fix this, please remove the `srcset` ' + 'attribute.'); }); - it('should throw if `rawSrc` contains a Base64-encoded image (that starts with `data:`)', () => { + it('should throw if an old `rawSrc` is present', () => { + setupTestingModule(); + + const template = ''; + expect(() => { + const fixture = createTestComponent(template); + fixture.detectChanges(); + }) + .toThrowError( + 'NG02952: The NgOptimizedImage directive has detected that the `rawSrc` ' + + 'attribute was used to activate the directive. Newer version of the directive uses ' + + 'the `ngSrc` attribute instead. Please replace `rawSrc` with `ngSrc` and ' + + '`rawSrcset` with `ngSrcset` attributes in the template to enable image optimizations.'); + }); + + it('should throw if `ngSrc` contains a Base64-encoded image (that starts with `data:`)', () => { setupTestingModule(); expect(() => { - const template = ''; + const template = ''; const fixture = createTestComponent(template); fixture.detectChanges(); }) .toThrowError( - 'NG02952: The NgOptimizedImage directive has detected that `rawSrc` ' + + 'NG02952: The NgOptimizedImage directive has detected that `ngSrc` ' + 'is a Base64-encoded string (data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDov...). ' + 'NgOptimizedImage does not support Base64-encoded strings. ' + 'To fix this, disable the NgOptimizedImage directive for this element ' + - 'by removing `rawSrc` and using a standard `src` attribute instead.'); + 'by removing `ngSrc` and using a standard `src` attribute instead.'); }); - it('should throw if `rawSrc` contains a `blob:` URL', (done) => { + it('should throw if `ngSrc` contains a `blob:` URL', (done) => { // Domino does not support canvas elements properly, // so run this test only in a browser. if (!isBrowser) { @@ -151,9 +166,9 @@ describe('Image directive', () => { // Note: use RegExp to partially match the error message, since the blob URL // is created dynamically, so it might be different for each invocation. const errorMessageRegExp = - /NG02952: The NgOptimizedImage directive (.*?) has detected that `rawSrc` was set to a blob URL \(blob:/; + /NG02952: The NgOptimizedImage directive (.*?) has detected that `ngSrc` was set to a blob URL \(blob:/; expect(() => { - const template = ''; + const template = ''; const fixture = createTestComponent(template); fixture.detectChanges(); }).toThrowError(errorMessageRegExp); @@ -164,14 +179,14 @@ describe('Image directive', () => { it('should throw if `width` and `height` are not set', () => { setupTestingModule(); - const template = ''; + const template = ''; expect(() => { const fixture = createTestComponent(template); fixture.detectChanges(); }) .toThrowError( 'NG02954: The NgOptimizedImage directive (activated on an ' + - 'element with the `rawSrc="img.png"`) has detected that these ' + + '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.'); @@ -180,14 +195,14 @@ describe('Image directive', () => { it('should throw if `width` is not set', () => { setupTestingModule(); - const template = ''; + const template = ''; expect(() => { const fixture = createTestComponent(template); fixture.detectChanges(); }) .toThrowError( 'NG02954: The NgOptimizedImage directive (activated on an ' + - 'element with the `rawSrc="img.png"`) has detected that these ' + + '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.'); @@ -196,14 +211,14 @@ describe('Image directive', () => { it('should throw if `width` is 0', () => { setupTestingModule(); - const template = ''; + const template = ''; expect(() => { const fixture = createTestComponent(template); fixture.detectChanges(); }) .toThrowError( 'NG02952: The NgOptimizedImage directive (activated on an ' + - 'element with the `rawSrc="img.png"`) has detected that `width` ' + + 'element with the `ngSrc="img.png"`) has detected that `width` ' + 'has an invalid value (`0`). To fix this, provide `width` as ' + 'a number greater than 0.'); }); @@ -211,14 +226,14 @@ describe('Image directive', () => { it('should throw if `width` has an invalid value', () => { setupTestingModule(); - const template = ''; + const template = ''; expect(() => { const fixture = createTestComponent(template); fixture.detectChanges(); }) .toThrowError( 'NG02952: The NgOptimizedImage directive (activated on an ' + - 'element with the `rawSrc="img.png"`) has detected that `width` ' + + 'element with the `ngSrc="img.png"`) has detected that `width` ' + 'has an invalid value (`10px`). To fix this, provide `width` ' + 'as a number greater than 0.'); }); @@ -226,14 +241,14 @@ describe('Image directive', () => { it('should throw if `height` is not set', () => { setupTestingModule(); - const template = ''; + const template = ''; expect(() => { const fixture = createTestComponent(template); fixture.detectChanges(); }) .toThrowError( 'NG02954: The NgOptimizedImage directive (activated on an ' + - 'element with the `rawSrc="img.png"`) has detected that these required ' + + '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.'); @@ -242,14 +257,14 @@ describe('Image directive', () => { it('should throw if `height` is 0', () => { setupTestingModule(); - const template = ''; + const template = ''; expect(() => { const fixture = createTestComponent(template); fixture.detectChanges(); }) .toThrowError( 'NG02952: The NgOptimizedImage directive (activated on an ' + - 'element with the `rawSrc="img.png"`) has detected that `height` ' + + 'element with the `ngSrc="img.png"`) has detected that `height` ' + 'has an invalid value (`0`). To fix this, provide `height` as a number ' + 'greater than 0.'); }); @@ -257,50 +272,50 @@ describe('Image directive', () => { it('should throw if `height` has an invalid value', () => { setupTestingModule(); - const template = ''; + const template = ''; expect(() => { const fixture = createTestComponent(template); fixture.detectChanges(); }) .toThrowError( 'NG02952: The NgOptimizedImage directive (activated on an element ' + - 'with the `rawSrc="img.png"`) has detected that `height` has an invalid ' + + 'with the `ngSrc="img.png"`) has detected that `height` has an invalid ' + 'value (`10%`). To fix this, provide `height` as a number greater than 0.'); }); - it('should throw if `rawSrc` value is not provided', () => { + it('should throw if `ngSrc` value is not provided', () => { setupTestingModule(); - const template = ''; + const template = ''; expect(() => { const fixture = createTestComponent(template); fixture.detectChanges(); }) .toThrowError( 'NG02952: The NgOptimizedImage directive (activated on an ' + - 'element with the `rawSrc=""`) has detected that `rawSrc` has an ' + + 'element with the `ngSrc=""`) has detected that `ngSrc` has an ' + 'invalid value (``). ' + 'To fix this, change the value to a non-empty string.'); }); - it('should throw if `rawSrc` value is set to an empty string', () => { + it('should throw if `ngSrc` value is set to an empty string', () => { setupTestingModule(); - const template = ''; + const template = ''; expect(() => { const fixture = createTestComponent(template); fixture.detectChanges(); }) .toThrowError( 'NG02952: The NgOptimizedImage directive (activated on an element ' + - 'with the `rawSrc=" "`) has detected that `rawSrc` has an invalid value ' + + 'with the `ngSrc=" "`) has detected that `ngSrc` has an invalid value ' + '(` `). To fix this, change the value to a non-empty string.'); }); - describe('invalid `rawSrcset` values', () => { - const mockDirectiveInstance = {rawSrc: 'img.png'} as NgOptimizedImage; + describe('invalid `ngSrcset` values', () => { + const mockDirectiveInstance = {ngSrc: 'img.png'} as NgOptimizedImage; - it('should throw for empty rawSrcSet', () => { + it('should throw for empty ngSrcSet', () => { const imageLoader = (config: ImageLoaderConfig) => { const width = config.width ? `-${config.width}` : ``; return window.location.origin + `/path/${config.src}${width}.png`; @@ -308,7 +323,7 @@ describe('Image directive', () => { setupTestingModule({imageLoader}); const template = ` - + `; expect(() => { const fixture = createTestComponent(template); @@ -316,12 +331,12 @@ describe('Image directive', () => { }) .toThrowError( 'NG02952: The NgOptimizedImage directive (activated on an ' + - 'element with the `rawSrc="img"`) has detected that `rawSrcset` ' + + 'element with the `ngSrc="img"`) has detected that `ngSrcset` ' + 'has an invalid value (``). ' + 'To fix this, change the value to a non-empty string.'); }); - it('should throw for invalid rawSrcSet', () => { + it('should throw for invalid ngSrcSet', () => { const imageLoader = (config: ImageLoaderConfig) => { const width = config.width ? `-${config.width}` : ``; return window.location.origin + `/path/${config.src}${width}.png`; @@ -329,7 +344,7 @@ describe('Image directive', () => { setupTestingModule({imageLoader}); const template = ` - + `; expect(() => { const fixture = createTestComponent(template); @@ -337,13 +352,13 @@ describe('Image directive', () => { }) .toThrowError( 'NG02952: The NgOptimizedImage directive (activated on an element ' + - 'with the `rawSrc="img"`) has detected that `rawSrcset` has an invalid value ' + - '(`100q, 200q`). To fix this, supply `rawSrcset` using a comma-separated list ' + + 'with the `ngSrc="img"`) has detected that `ngSrcset` has an invalid value ' + + '(`100q, 200q`). To fix this, supply `ngSrcset` using a comma-separated list ' + 'of one or more width descriptors (e.g. "100w, 200w") or density descriptors ' + '(e.g. "1x, 2x").'); }); - it('should throw if rawSrcset exceeds the density cap', () => { + it('should throw if ngSrcset exceeds the density cap', () => { const imageLoader = (config: ImageLoaderConfig) => { const width = config.width ? `-${config.width}` : ``; return window.location.origin + `/path/${config.src}${width}.png`; @@ -351,7 +366,7 @@ describe('Image directive', () => { setupTestingModule({imageLoader}); const template = ` - + `; expect(() => { const fixture = createTestComponent(template); @@ -360,8 +375,8 @@ describe('Image directive', () => { .toThrowError( `NG0${ RuntimeErrorCode - .INVALID_INPUT}: The NgOptimizedImage directive (activated on an element with the \`rawSrc="img"\`) ` + - `has detected that the \`rawSrcset\` contains an unsupported image density:` + + .INVALID_INPUT}: The NgOptimizedImage directive (activated on an element with the \`ngSrc="img"\`) ` + + `has detected that the \`ngSrcset\` contains an unsupported image density:` + `\`1x, 2x, 3x, 4x, 5x\`. NgOptimizedImage generally recommends a max image density of ` + `${RECOMMENDED_SRCSET_DENSITY_CAP}x but supports image densities up to ` + `${ABSOLUTE_SRCSET_DENSITY_CAP}x. The human eye cannot distinguish between image densities ` + @@ -372,7 +387,7 @@ describe('Image directive', () => { }); - it('should throw if rawSrcset exceeds the density cap with multiple digits', () => { + it('should throw if ngSrcset exceeds the density cap with multiple digits', () => { const imageLoader = (config: ImageLoaderConfig) => { const width = config.width ? `-${config.width}` : ``; return window.location.origin + `/path/${config.src}${width}.png`; @@ -380,7 +395,7 @@ describe('Image directive', () => { setupTestingModule({imageLoader}); const template = ` - + `; expect(() => { const fixture = createTestComponent(template); @@ -389,8 +404,8 @@ describe('Image directive', () => { .toThrowError( `NG0${ RuntimeErrorCode - .INVALID_INPUT}: The NgOptimizedImage directive (activated on an element with the \`rawSrc="img"\`) ` + - `has detected that the \`rawSrcset\` contains an unsupported image density:` + + .INVALID_INPUT}: The NgOptimizedImage directive (activated on an element with the \`ngSrc="img"\`) ` + + `has detected that the \`ngSrcset\` contains an unsupported image density:` + `\`1x, 200x\`. NgOptimizedImage generally recommends a max image density of ` + `${RECOMMENDED_SRCSET_DENSITY_CAP}x but supports image densities up to ` + `${ABSOLUTE_SRCSET_DENSITY_CAP}x. The human eye cannot distinguish between image densities ` + @@ -402,75 +417,75 @@ describe('Image directive', () => { it('should throw if width srcset is missing a comma', () => { expect(() => { - assertValidRawSrcset(mockDirectiveInstance, '100w 200w'); + assertValidNgSrcset(mockDirectiveInstance, '100w 200w'); }).toThrowError(); }); it('should throw if density srcset is missing a comma', () => { expect(() => { - assertValidRawSrcset(mockDirectiveInstance, '1x 2x'); + assertValidNgSrcset(mockDirectiveInstance, '1x 2x'); }).toThrowError(); }); it('should throw if density srcset has too many digits', () => { expect(() => { - assertValidRawSrcset(mockDirectiveInstance, '100x, 2x'); + assertValidNgSrcset(mockDirectiveInstance, '100x, 2x'); }).toThrowError(); }); it('should throw if width srcset includes a file name', () => { expect(() => { - assertValidRawSrcset(mockDirectiveInstance, 'a.png 100w, b.png 200w'); + assertValidNgSrcset(mockDirectiveInstance, 'a.png 100w, b.png 200w'); }).toThrowError(); }); it('should throw if density srcset includes a file name', () => { expect(() => { - assertValidRawSrcset(mockDirectiveInstance, 'a.png 1x, b.png 2x'); + assertValidNgSrcset(mockDirectiveInstance, 'a.png 1x, b.png 2x'); }).toThrowError(); }); it('should throw if srcset starts with a letter', () => { expect(() => { - assertValidRawSrcset(mockDirectiveInstance, 'a100w, 200w'); + assertValidNgSrcset(mockDirectiveInstance, 'a100w, 200w'); }).toThrowError(); }); it('should throw if srcset starts with another non-digit', () => { expect(() => { - assertValidRawSrcset(mockDirectiveInstance, '--100w, 200w'); + assertValidNgSrcset(mockDirectiveInstance, '--100w, 200w'); }).toThrowError(); }); it('should throw if first descriptor in srcset is junk', () => { expect(() => { - assertValidRawSrcset(mockDirectiveInstance, 'foo, 1x'); + assertValidNgSrcset(mockDirectiveInstance, 'foo, 1x'); }).toThrowError(); }); it('should throw if later descriptors in srcset are junk', () => { expect(() => { - assertValidRawSrcset(mockDirectiveInstance, '100w, foo'); + assertValidNgSrcset(mockDirectiveInstance, '100w, foo'); }).toThrowError(); }); it('should throw if srcset has a density descriptor after a width descriptor', () => { expect(() => { - assertValidRawSrcset(mockDirectiveInstance, '100w, 1x'); + assertValidNgSrcset(mockDirectiveInstance, '100w, 1x'); }).toThrowError(); }); it('should throw if srcset has a width descriptor after a density descriptor', () => { expect(() => { - assertValidRawSrcset(mockDirectiveInstance, '1x, 200w'); + assertValidNgSrcset(mockDirectiveInstance, '1x, 200w'); }).toThrowError(); }); }); const inputs = [ - ['rawSrc', 'new-img.png'], // - ['width', 10], // - ['height', 20], // + ['ngSrc', 'new-img.png'], // + ['width', 10], // + ['height', 20], // ['priority', true] ]; inputs.forEach(([inputName, value]) => { @@ -478,7 +493,7 @@ describe('Image directive', () => { setupTestingModule(); const template = - ''; + ''; // Initial render const fixture = createTestComponent(template); fixture.detectChanges(); @@ -491,7 +506,7 @@ describe('Image directive', () => { }) .toThrowError( 'NG02953: The NgOptimizedImage directive (activated on an element ' + - `with the \`rawSrc="img.png"\`) has detected that \`${inputName}\` was updated ` + + `with the \`ngSrc="img.png"\`) has detected that \`${inputName}\` was updated ` + 'after initialization. The NgOptimizedImage directive will not react ' + `to this input change. To fix this, switch \`${inputName}\` a static value or ` + 'wrap the image element in an *ngIf that is gated on the necessary value.'); @@ -503,7 +518,7 @@ describe('Image directive', () => { it('should eagerly load priority images', () => { setupTestingModule(); - const template = ''; + const template = ''; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -515,7 +530,7 @@ describe('Image directive', () => { it('should lazily load non-priority images', () => { setupTestingModule(); - const template = ''; + const template = ''; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -529,7 +544,7 @@ describe('Image directive', () => { it('should override the default loading behavior for non-priority images', () => { setupTestingModule(); - const template = ''; + const template = ''; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -542,14 +557,14 @@ describe('Image directive', () => { setupTestingModule(); const template = - ''; + ''; expect(() => { const fixture = createTestComponent(template); fixture.detectChanges(); }) .toThrowError( 'NG02952: The NgOptimizedImage directive (activated on an element ' + - 'with the `rawSrc="path/img.png"`) has detected that the `loading` attribute ' + + 'with the `ngSrc="path/img.png"`) has detected that the `loading` attribute ' + 'was used on an image that was marked "priority". Setting `loading` on priority ' + 'images is not allowed because these images will always be eagerly loaded. ' + 'To fix this, remove the “loading” attribute from the priority image.'); @@ -558,7 +573,7 @@ describe('Image directive', () => { it('should support setting loading priority to "auto"', () => { setupTestingModule(); - const template = ''; + const template = ''; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -570,14 +585,14 @@ describe('Image directive', () => { it('should throw for invalid loading inputs', () => { setupTestingModule(); - const template = ''; + const template = ''; expect(() => { const fixture = createTestComponent(template); fixture.detectChanges(); }) .toThrowError( 'NG02952: The NgOptimizedImage directive (activated on an element ' + - 'with the `rawSrc="path/img.png"`) has detected that the `loading` attribute ' + + 'with the `ngSrc="path/img.png"`) has detected that the `loading` attribute ' + 'has an invalid value (`fast`). To fix this, provide a valid value ("lazy", ' + '"eager", or "auto").'); }); @@ -587,7 +602,7 @@ describe('Image directive', () => { it('should be "high" for priority images', () => { setupTestingModule(); - const template = ''; + const template = ''; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -599,7 +614,7 @@ describe('Image directive', () => { it('should be "auto" for non-priority images', () => { setupTestingModule(); - const template = ''; + const template = ''; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -621,7 +636,7 @@ describe('Image directive', () => { setupTestingModule({imageLoader}); const consoleWarnSpy = spyOn(console, 'warn'); - const template = ''; + const template = ''; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -629,7 +644,7 @@ describe('Image directive', () => { expect(consoleWarnSpy.calls.argsFor(0)[0]) .toBe( 'NG02956: The NgOptimizedImage directive (activated on an element ' + - 'with the `rawSrc="a.png"`) has detected that there is no preconnect tag ' + + 'with the `ngSrc="a.png"`) has detected that there is no preconnect tag ' + 'present for this image. Preconnecting to the origin(s) that serve ' + 'priority images ensures that these images are delivered as soon as ' + 'possible. To fix this, please add the following element into the ' + @@ -642,7 +657,7 @@ describe('Image directive', () => { setupTestingModule({imageLoader}); const consoleWarnSpy = spyOn(console, 'warn'); - const template = ''; + const template = ''; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -655,7 +670,7 @@ describe('Image directive', () => { setupTestingModule({imageLoader}); const consoleWarnSpy = spyOn(console, 'warn'); - const template = ''; + const template = ''; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -663,7 +678,7 @@ describe('Image directive', () => { expect(consoleWarnSpy.calls.argsFor(0)[0]) .toBe( 'NG02956: The NgOptimizedImage directive (activated on an element ' + - 'with the `rawSrc="a.png"`) has detected that there is no preconnect tag ' + + 'with the `ngSrc="a.png"`) has detected that there is no preconnect tag ' + 'present for this image. Preconnecting to the origin(s) that serve priority ' + 'images ensures that these images are delivered as soon as possible. ' + 'To fix this, please add the following element into the of the document:' + @@ -677,7 +692,7 @@ describe('Image directive', () => { setupTestingModule({imageLoader}); const consoleWarnSpy = spyOn(console, 'warn'); - const template = ''; + const template = ''; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -685,7 +700,7 @@ describe('Image directive', () => { expect(consoleWarnSpy.calls.argsFor(0)[0]) .toBe( 'NG02956: The NgOptimizedImage directive (activated on an element ' + - 'with the `rawSrc="a.png"`) has detected that there is no preconnect tag ' + + 'with the `ngSrc="a.png"`) has detected that there is no preconnect tag ' + 'present for this image. Preconnecting to the origin(s) that serve priority ' + 'images ensures that these images are delivered as soon as possible. ' + 'To fix this, please add the following element into the of the document:' + @@ -697,7 +712,7 @@ describe('Image directive', () => { setupTestingModule({imageLoader}); const consoleWarnSpy = spyOn(console, 'warn'); - const template = ''; + const template = ''; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -715,7 +730,7 @@ describe('Image directive', () => { setupTestingModule({imageLoader}); const consoleWarnSpy = spyOn(console, 'warn'); - const template = ''; + const template = ''; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -732,7 +747,7 @@ describe('Image directive', () => { setupTestingModule({imageLoader, extraProviders: providers}); const consoleWarnSpy = spyOn(console, 'warn'); - const template = ''; + const template = ''; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -747,7 +762,7 @@ describe('Image directive', () => { setupTestingModule({imageLoader, extraProviders: providers}); const consoleWarnSpy = spyOn(console, 'warn'); - const template = ''; + const template = ''; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -762,7 +777,7 @@ describe('Image directive', () => { setupTestingModule({imageLoader, extraProviders: providers}); const consoleWarnSpy = spyOn(console, 'warn'); - const template = ''; + const template = ''; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -777,7 +792,7 @@ describe('Image directive', () => { setupTestingModule({imageLoader, extraProviders: providers}); const consoleWarnSpy = spyOn(console, 'warn'); - const template = ''; + const template = ''; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -792,7 +807,7 @@ describe('Image directive', () => { ]; setupTestingModule({imageLoader, extraProviders: providers}); - const template = ''; + const template = ''; expect(() => { const fixture = createTestComponent(template); fixture.detectChanges(); @@ -806,10 +821,10 @@ describe('Image directive', () => { }); describe('loaders', () => { - it('should set `src` to match `rawSrc` if image loader is not provided', () => { + it('should set `src` to match `ngSrc` if image loader is not provided', () => { setupTestingModule(); - const template = ``; + const template = ``; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -824,8 +839,8 @@ describe('Image directive', () => { setupTestingModule({imageLoader}); const template = ` - - + + `; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -836,13 +851,13 @@ describe('Image directive', () => { expect(imgs[1].src.trim()).toBe(`${IMG_BASE_URL}/img-2.png`); }); - it('should pass absolute URLs defined in the `rawSrc` to custom image loaders provided via the `IMAGE_LOADER` token', + it('should pass absolute URLs defined in the `ngSrc` to custom image loaders provided via the `IMAGE_LOADER` token', () => { const imageLoader = (config: ImageLoaderConfig) => `${config.src}?rewritten=true`; setupTestingModule({imageLoader}); const template = ` - + `; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -859,7 +874,7 @@ describe('Image directive', () => { }; setupTestingModule({imageLoader}); - const template = ''; + const template = ''; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -868,7 +883,7 @@ describe('Image directive', () => { expect(img.src).toBe(`${IMG_BASE_URL}/img.png`); }); - describe('`rawSrcset` values', () => { + describe('`ngSrcset` values', () => { let imageLoader!: ImageLoader; beforeEach(() => { @@ -878,11 +893,11 @@ describe('Image directive', () => { }; }); - it('should NOT set `srcset` if no `rawSrcset` value', () => { + it('should NOT set `srcset` if no `ngSrcset` value', () => { setupTestingModule({imageLoader}); const template = ` - + `; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -893,11 +908,11 @@ describe('Image directive', () => { expect(img.srcset).toBe(''); }); - it('should set the `srcset` using the `rawSrcset` value with width descriptors', () => { + it('should set the `srcset` using the `ngSrcset` value with width descriptors', () => { setupTestingModule({imageLoader}); const template = ` - + `; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -909,11 +924,11 @@ describe('Image directive', () => { .toBe(`${IMG_BASE_URL}/img.png?w=100 100w, ${IMG_BASE_URL}/img.png?w=200 200w`); }); - it('should set the `srcset` using the `rawSrcset` value with density descriptors', () => { + it('should set the `srcset` using the `ngSrcset` value with density descriptors', () => { setupTestingModule({imageLoader}); const template = ` - + `; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -925,11 +940,11 @@ describe('Image directive', () => { .toBe(`${IMG_BASE_URL}/img.png?w=100 1x, ${IMG_BASE_URL}/img.png?w=200 2x`); }); - it('should set the `srcset` if `rawSrcset` has only one src defined', () => { + it('should set the `srcset` if `ngSrcset` has only one src defined', () => { setupTestingModule({imageLoader}); const template = ` - + `; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -940,11 +955,11 @@ describe('Image directive', () => { expect(img.srcset.trim()).toBe(`${IMG_BASE_URL}/img.png?w=100 100w`); }); - it('should set the `srcset` if `rawSrcSet` has extra spaces', () => { + it('should set the `srcset` if `ngSrcSet` has extra spaces', () => { setupTestingModule({imageLoader}); const template = ` - + `; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -956,11 +971,11 @@ describe('Image directive', () => { .toBe(`${IMG_BASE_URL}/img.png?w=100 100w, ${IMG_BASE_URL}/img.png?w=200 200w`); }); - it('should set the `srcset` if `rawSrcSet` has a trailing comma', () => { + it('should set the `srcset` if `ngSrcSet` has a trailing comma', () => { setupTestingModule({imageLoader}); const template = ` - + `; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -972,11 +987,11 @@ describe('Image directive', () => { .toBe(`${IMG_BASE_URL}/img.png?w=100 1x, ${IMG_BASE_URL}/img.png?w=200 2x`); }); - it('should set the `srcset` if `rawSrcSet` has 3+ srcs', () => { + it('should set the `srcset` if `ngSrcSet` has 3+ srcs', () => { setupTestingModule({imageLoader}); const template = ` - + `; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -991,11 +1006,11 @@ describe('Image directive', () => { `${IMG_BASE_URL}/img.png?w=300 300w`); }); - it('should set the `srcset` if `rawSrcSet` has decimal density descriptors', () => { + it('should set the `srcset` if `ngSrcSet` has decimal density descriptors', () => { setupTestingModule({imageLoader}); const template = ` - + `; const fixture = createTestComponent(template); fixture.detectChanges(); @@ -1032,7 +1047,7 @@ const ANGULAR_LOGO_BASE64 = class TestComponent { width = 100; height = 50; - rawSrc = 'img.png'; + ngSrc = 'img.png'; priority = false; } diff --git a/packages/common/test/image_loaders/image_loader_spec.ts b/packages/common/test/image_loaders/image_loader_spec.ts index 999d40e937637..b3562cdaae1d1 100644 --- a/packages/common/test/image_loaders/image_loader_spec.ts +++ b/packages/common/test/image_loaders/image_loader_spec.ts @@ -17,9 +17,9 @@ import {TestBed} from '@angular/core/testing'; const absoluteUrlError = (src: string, path: string) => `NG02959: Image loader has detected a \`\` tag with an invalid ` + - `\`rawSrc\` attribute: ${src}. This image loader expects \`rawSrc\` ` + + `\`ngSrc\` attribute: ${src}. This image loader expects \`ngSrc\` ` + `to be a relative URL - however the provided value is an absolute URL. ` + - `To fix this, provide \`rawSrc\` as a path relative to the base URL ` + + `To fix this, provide \`ngSrc\` as a path relative to the base URL ` + `configured for this loader (\`${path}\`).`; const invalidPathError = (path: string, formats: string) => diff --git a/packages/core/test/bundling/image-directive/e2e/basic/basic.ts b/packages/core/test/bundling/image-directive/e2e/basic/basic.ts index a41ba5d50226a..ace941af07770 100644 --- a/packages/core/test/bundling/image-directive/e2e/basic/basic.ts +++ b/packages/core/test/bundling/image-directive/e2e/basic/basic.ts @@ -13,7 +13,7 @@ import {Component} from '@angular/core'; selector: 'basic', standalone: true, imports: [NgOptimizedImage], - template: ``, + template: ``, providers: [{ provide: IMAGE_LOADER, useValue: () => 'https://angular.io/assets/images/logos/angular/angular.svg' diff --git a/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.e2e-spec.ts b/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.e2e-spec.ts index d133b557ea4ae..caadd349cfb22 100644 --- a/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.e2e-spec.ts +++ b/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.e2e-spec.ts @@ -36,7 +36,7 @@ describe('NgOptimizedImage directive', () => { expectErrorMessageInLogs( logs, 'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' + - 'with the \`rawSrc=\\"/e2e/b.png\\"`) has detected that ' + + 'with the \`ngSrc=\\"/e2e/b.png\\"`) has detected that ' + 'the aspect ratio of the image does not match the aspect ratio indicated by the width and height attributes. ' + '\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' + '\\nSupplied width and height attributes: 26w x 30h (aspect-ratio: 0.8666666666666667). ' + @@ -45,7 +45,7 @@ describe('NgOptimizedImage directive', () => { expectErrorMessageInLogs( logs, 'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' + - 'with the \`rawSrc=\\"/e2e/b.png\\"`) has detected that ' + + 'with the \`ngSrc=\\"/e2e/b.png\\"`) has detected that ' + 'the aspect ratio of the image does not match the aspect ratio indicated by the width and height attributes. ' + '\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' + '\\nSupplied width and height attributes: 24w x 240h (aspect-ratio: 0.1). ' + @@ -55,7 +55,7 @@ describe('NgOptimizedImage directive', () => { expectErrorMessageInLogs( logs, 'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' + - 'with the \`rawSrc=\\"/e2e/b.png\\"`) has detected that ' + + 'with the \`ngSrc=\\"/e2e/b.png\\"`) has detected that ' + 'the aspect ratio of the rendered image does not match the image\'s intrinsic aspect ratio. ' + '\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' + '\\nRendered image size: 250w x 30h (aspect-ratio: 8.333333333333334). ' + @@ -66,7 +66,7 @@ describe('NgOptimizedImage directive', () => { expectErrorMessageInLogs( logs, 'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' + - 'with the \`rawSrc=\\"/e2e/b.png\\"`) has detected that ' + + 'with the \`ngSrc=\\"/e2e/b.png\\"`) has detected that ' + 'the aspect ratio of the rendered image does not match the image\'s intrinsic aspect ratio. ' + '\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' + '\\nRendered image size: 30w x 250h (aspect-ratio: 0.12). ' + @@ -80,7 +80,7 @@ describe('NgOptimizedImage directive', () => { expectErrorMessageInLogs( logs, 'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' + - 'with the \`rawSrc=\\"/e2e/b.png\\"`) has detected that ' + + 'with the \`ngSrc=\\"/e2e/b.png\\"`) has detected that ' + 'the aspect ratio of the image does not match the aspect ratio indicated by the width and height attributes. ' + '\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' + '\\nSupplied width and height attributes: 150w x 250h (aspect-ratio: 0.6). ' + diff --git a/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.ts b/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.ts index 6a94b38d2da0e..0ee21ca12c223 100644 --- a/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.ts +++ b/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.ts @@ -16,33 +16,33 @@ import {Component} from '@angular/core'; template: ` - +
- +
- - - + + +
- + - + - + - +
- +
- - - + + +
`, }) @@ -55,23 +55,23 @@ export class ImageDistortionPassingComponent { template: ` - +
- + - + - +
- - + + - +
`, }) diff --git a/packages/core/test/bundling/image-directive/e2e/lcp-check/lcp-check.ts b/packages/core/test/bundling/image-directive/e2e/lcp-check/lcp-check.ts index d9714f89552e8..48fcd3df6ce41 100644 --- a/packages/core/test/bundling/image-directive/e2e/lcp-check/lcp-check.ts +++ b/packages/core/test/bundling/image-directive/e2e/lcp-check/lcp-check.ts @@ -18,12 +18,12 @@ import {Component} from '@angular/core'; 'b.png' should *not* be treated as an LCP element, since there is a bigger one right below it --> - +
- +
@@ -31,7 +31,7 @@ import {Component} from '@angular/core'; 'b.png' should *not* be treated as an LCP element here as well, since it's below the fold --> - + `, }) export class LcpCheckComponent { diff --git a/packages/core/test/bundling/image-directive/e2e/oversized-image/oversized-image.ts b/packages/core/test/bundling/image-directive/e2e/oversized-image/oversized-image.ts index c08e6be6a101a..03dc15a8fa8dc 100644 --- a/packages/core/test/bundling/image-directive/e2e/oversized-image/oversized-image.ts +++ b/packages/core/test/bundling/image-directive/e2e/oversized-image/oversized-image.ts @@ -16,12 +16,12 @@ import {Component} from '@angular/core'; template: `
- +
- +
- +
`, }) @@ -36,7 +36,7 @@ export class OversizedImageComponentPassing { template: `
- +
`, }) diff --git a/packages/core/test/bundling/image-directive/e2e/preconnect-check/preconnect-check.ts b/packages/core/test/bundling/image-directive/e2e/preconnect-check/preconnect-check.ts index a6d24f0d67708..8d122f7dc1b23 100644 --- a/packages/core/test/bundling/image-directive/e2e/preconnect-check/preconnect-check.ts +++ b/packages/core/test/bundling/image-directive/e2e/preconnect-check/preconnect-check.ts @@ -14,9 +14,9 @@ import {Component, Inject} from '@angular/core'; standalone: true, imports: [NgOptimizedImage], template: ` - - - + + + `, providers: [{ provide: IMAGE_LOADER, diff --git a/packages/core/test/bundling/image-directive/playground.ts b/packages/core/test/bundling/image-directive/playground.ts index 3052395cb75d3..f0cf7c5a03a22 100644 --- a/packages/core/test/bundling/image-directive/playground.ts +++ b/packages/core/test/bundling/image-directive/playground.ts @@ -34,12 +34,12 @@ import {Component} from '@angular/core'; `], template: `

- + Angular image app

- +
`, standalone: true,