Fix error where cache keys for reading are different than for writing

README.md

@@ -1,10 +1,11 @@
 # optimized-images-loader [![npm version](https://badgen.net/npm/v/optimized-images-loader)](https://www.npmjs.com/package/optimized-images-loader) [![license](https://badgen.net/github/license/cyrilwanner/optimized-images-loader)](https://github.com/cyrilwanner/optimized-images-loader/blob/master/LICENSE) [![downloads](https://badgen.net/npm/dt/optimized-images-loader)](https://www.npmjs.com/package/optimized-images-loader)
 
 Features:
-- **Optimize** images on the fly using WebAssembly (runs in every environment)
+- **Optimize** images using WebAssembly (runs in every environment)
 - **Image manipulation** provided by various query params (resize, converting, low quality placeholders, ...)
 - **Build cache for images** for faster builds
-- **Convert to WebP** on the fly
+- **Convert to WebP** automatically during a webpack build
+- **Inline** small images automatically
 - ...
 
 ## Table of contents

src/cache.ts

@@ -69,7 +69,7 @@ const getCacheFolder = async (loaderOptions: LoaderOptions): Promise<string> =>
  * @param {ImageOptions} imageOptions Image options
  * @returns {string} Hash
  */
-const getHash = (source: Buffer, imageOptions: ImageOptions): string => {
+export const getHash = (source: Buffer, imageOptions: ImageOptions): string => {
  const query = querystring.stringify(imageOptions as any); // eslint-disable-line
 
  return `${(getHashDigest as (input: Buffer) => string)(source)}-${(getHashDigest as (input: Buffer) => string)(
@@ -81,18 +81,15 @@ const getHash = (source: Buffer, imageOptions: ImageOptions): string => {
  * Retrieves an optimized image from cache if it exists
  *
  * @async
- * @param {Buffer} source Original image
- * @param {ImageOptions} imageOptions Image resource query
+ * @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
  */
 export const getCache = async (
- source: Buffer,
- imageOptions: ImageOptions,
+ hash: string,
  loaderOptions: LoaderOptions,
 ): Promise<{ data: Buffer | string | string[]; info: { width?: number; height?: number; format?: string } } | null> => {
  const cacheFolder = await getCacheFolder(loaderOptions);
- const hash = getHash(source, imageOptions);
 
  try {
  const options = JSON.parse((await fs.readFile(path.resolve(cacheFolder, `${hash}.json`))).toString());
@@ -118,21 +115,22 @@ export const getCache = async (
  * Writes an optimized image into the cache
  *
  * @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,
  loaderOptions: LoaderOptions,
 ): Promise<void> => {
  const cacheFolder = await getCacheFolder(loaderOptions);
- const hash = getHash(source, imageOptions);
 
  if (Buffer.isBuffer(result)) {
  await fs.writeFile(path.resolve(cacheFolder, hash), result);

src/index.ts

@@ -4,7 +4,7 @@ import processImage from './processImage';
 import parseQuery from './parseQuery';
 import { LoaderOptions } from './options';
 import processLoaders from './processLoaders';
-import { getCache, setCache } from './cache';
+import { getCache, setCache, getHash } from './cache';
 
 /**
  * Optimized images loader
@@ -25,15 +25,17 @@ export default function optimizedImagesLoader(this: loader.LoaderContext, source
  let result: { data: Buffer | string | string[]; info: { width?: number; height?: number; format?: string } };
 
  // try retrieving the image from cache
- const cached = await getCache(source, imageOptions, loaderOptions);
+ const cacheHash = getHash(source, imageOptions);
+ const cached = await getCache(cacheHash, loaderOptions);
+
  if (cached) {
  result = cached;
  } else {
  // process image
  result = await processImage(source, imageOptions, loaderOptions);
 
  // cache processed image
- setCache(source, result.data, result.info, imageOptions, loaderOptions);
+ setCache(cacheHash, source, result.data, result.info, imageOptions, loaderOptions);
  }
 
  // process further loaders