Fix final image options when loaded from cache

orlandolee0223 · Jul 30, 2020 · 2ba7043 · 2ba7043
1 parent cb3a483
commit 2ba7043
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/src/cache.ts b/src/cache.ts
@@ -83,12 +83,16 @@ export const getHash = (source: Buffer, imageOptions: ImageOptions): string => {
  * @async
  * @param {string} hash Cache hash
  * @param {LoaderOptions} loaderOptions Optimized images loader options
- * @returns {{ data: Buffer | string | string[]; info: { width?: number; height?: number; format?: string } } | null} Cached image or null if not present
+ * @returns {{ data: Buffer | string | string[]; info: { width?: number; height?: number; format?: string }, imageOptions: ImageOptions } | null} Cached image or null if not present
  */
 export const getCache = async (
  hash: string,
  loaderOptions: LoaderOptions,
-): Promise<{ data: Buffer | string | string[]; info: { width?: number; height?: number; format?: string } } | null> => {
+): Promise<{
+ data: Buffer | string | string[];
+ info: { width?: number; height?: number; format?: string };
+ imageOptions: ImageOptions;
+} | null> => {
  const cacheFolder = await getCacheFolder(loaderOptions);
 
  try {
@@ -102,10 +106,10 @@ export const getCache = async (
  const data = await fs.readFile(path.resolve(cacheFolder, hash));
 
  if (options.isBuffer) {
- return { data, info: options.info };
+ return { data, info: options.info, imageOptions: options.imageOptions };
  }
 
- return { data: JSON.parse(data.toString()), info: options.info };
+ return { data: JSON.parse(data.toString()), info: options.info, imageOptions: options.imageOptions };
  } catch {
  return null;
  }
@@ -116,15 +120,13 @@ export const getCache = async (
  *
  * @async
  * @param {string} hash Cache hash
- * @param {Buffer} source Original image
  * @param {Buffer | string | string[]} result Optimized image
  * @param {{ width?: number; height?: number; format?: string }} info Image information
  * @param {ImageOptions} imageOptions Image options
  * @param {LoaderOptions} loaderOptions Optimized images loader options
  */
 export const setCache = async (
  hash: string,
- source: Buffer,
  result: Buffer | string | string[],
  { width, height, format }: { width?: number; height?: number; format?: string },
  imageOptions: ImageOptions,

diff --git a/src/index.ts b/src/index.ts
@@ -1,7 +1,7 @@
 import { loader } from 'webpack';
 import { getOptions } from 'loader-utils';
 import processImage from './processImage';
-import parseQuery from './parseQuery';
+import parseQuery, { ImageOptions } from './parseQuery';
 import { LoaderOptions } from './options';
 import processLoaders from './processLoaders';
 import { getCache, setCache, getHash } from './cache';
@@ -30,12 +30,19 @@ export default function optimizedImagesLoader(this: loader.LoaderContext, source
 
  if (cached) {
  result = cached;
+
+ // update image options from cache
+ if (cached.imageOptions) {
+ (Object.keys(cached.imageOptions) as Array<keyof ImageOptions>).forEach((option: keyof ImageOptions) => {
+ (imageOptions[option] as unknown) = cached.imageOptions[option];
+ });
+ }
  } else {
  // process image
  result = await processImage(source, imageOptions, loaderOptions);
 
  // cache processed image
- setCache(cacheHash, source, result.data, result.info, imageOptions, loaderOptions);
+ setCache(cacheHash, result.data, result.info, imageOptions, loaderOptions);
  }
 
  // process further loaders