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 66aedcd7e2300..59a687e7b03fc 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 @@ -75,7 +75,7 @@ export function createImageLoader( buildUrlFn: (path: string, config: ImageLoaderConfig) => string, exampleUrls?: string[]) { return function provideImageLoader( path: string, options: {ensurePreconnect?: boolean} = {ensurePreconnect: true}) { - if (ngDevMode && !isValidPath(path)) { + if (!isValidPath(path)) { throwInvalidPathError(path, exampleUrls || []); } @@ -84,7 +84,7 @@ export function createImageLoader( path = normalizePath(path); const loaderFn = (config: ImageLoaderConfig) => { - if (ngDevMode && isAbsoluteUrl(config.src)) { + if (isAbsoluteUrl(config.src)) { // Image loader functions expect an image file name (e.g. `my-image.png`) // or a relative path + a file name (e.g. `/a/b/c/my-image.png`) as an input, // so the final absolute URL can be constructed. @@ -106,19 +106,22 @@ export function createImageLoader( } function throwInvalidPathError(path: unknown, exampleUrls: string[]): never { - const exampleUrlsMsg = exampleUrls.join(' or '); throw new RuntimeError( RuntimeErrorCode.INVALID_LOADER_ARGUMENTS, - `Image loader has detected an invalid path (\`${path}\`). ` + - `To fix this, supply a path using one of the following formats: ${exampleUrlsMsg}`); + ngDevMode && + `Image loader has detected an invalid path (\`${path}\`). ` + + `To fix this, supply a path using one of the following formats: ${ + exampleUrls.join(' or ')}`); } function throwUnexpectedAbsoluteUrlError(path: string, url: string): never { throw new RuntimeError( RuntimeErrorCode.INVALID_LOADER_ARGUMENTS, - `Image loader has detected a \`\` tag with an invalid \`rawSrc\` attribute: ${url}. ` + - `This image loader expects \`rawSrc\` 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 ` + - `configured for this loader (\`${path}\`).`); + ngDevMode && + `Image loader has detected a \`\` tag with an invalid \`rawSrc\` attribute: ${ + url}. ` + + `This image loader expects \`rawSrc\` 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 ` + + `configured for this loader (\`${path}\`).`); } 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 1d6c8a80185ef..93f6ceff39ce3 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 @@ -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 thr resource URL and the value of the `rawSrc` attribute will be used as is. + * transformations to the resource URL and the value of the `rawSrc` 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: diff --git a/packages/common/src/directives/ng_optimized_image/url.ts b/packages/common/src/directives/ng_optimized_image/url.ts index 1e08c427b4bdf..4b1d646381eb5 100644 --- a/packages/common/src/directives/ng_optimized_image/url.ts +++ b/packages/common/src/directives/ng_optimized_image/url.ts @@ -17,13 +17,6 @@ export function isAbsoluteUrl(src: string): boolean { return /^https?:\/\//.test(src); } -// 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`; -} - // Invokes a callback for each element in the array. Also invokes a callback // recursively for each nested array. export function deepForEach(input: (T|any[])[], fn: (value: T) => void): void {