diff --git a/src/app/WardrobePage/OutfitControls.js b/src/app/WardrobePage/OutfitControls.js index 2d81b2c..8f75baf 100644 --- a/src/app/WardrobePage/OutfitControls.js +++ b/src/app/WardrobePage/OutfitControls.js @@ -607,11 +607,7 @@ function useDownloadableImage(visibleLayers) { // performance (can use cached SVG), and predictability (image will // look like what you see here). const imagePromises = visibleLayers.map((layer) => - loadImage({ - src: getBestImageUrlForLayer(layer, { - hiResMode, - crossOrigin: "anonymous", - }), + loadImage(getBestImageUrlForLayer(layer, { hiResMode }), { crossOrigin: "anonymous", }) ); diff --git a/src/app/components/OutfitMovieLayer.js b/src/app/components/OutfitMovieLayer.js index 5ab45e8..3ec8371 100644 --- a/src/app/components/OutfitMovieLayer.js +++ b/src/app/components/OutfitMovieLayer.js @@ -289,10 +289,7 @@ export async function loadMovieLibrary(librarySrc) { const manifestImages = new Map( library.properties.manifest.map(({ id, src }) => [ id, - loadImage({ - src: safeImageUrl(librarySrcDir + "/" + src, { - crossOrigin: "anonymous", - }), + loadImage(librarySrcDir + "/" + src, { crossOrigin: "anonymous", }), ]) diff --git a/src/app/components/OutfitPreview.js b/src/app/components/OutfitPreview.js index ab12df8..723ad8f 100644 --- a/src/app/components/OutfitPreview.js +++ b/src/app/components/OutfitPreview.js @@ -262,7 +262,9 @@ export function OutfitLayers({ ) : ( ({ - type: "image", - image, - })); + return loadImage(getBestImageUrlForLayer(layer, { hiResMode })).then( + (image) => ({ + type: "image", + image, + }) + ); } }); diff --git a/src/app/util.js b/src/app/util.js index 08466c8..b0841f6 100644 --- a/src/app/util.js +++ b/src/app/util.js @@ -352,7 +352,8 @@ export function useLocalStorage(key, initialValue) { return [storedValue, setValue]; } -export function loadImage({ src, crossOrigin = null }) { +export function loadImage(rawSrc, { crossOrigin = null } = {}) { + const src = safeImageUrl(rawSrc, { crossOrigin }); const image = new Image(); const promise = new Promise((resolve, reject) => { image.onload = () => resolve(image);