diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 00c0a882a..183df35cc 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -2295,6 +2295,9 @@ class App extends React.Component { storeAction: StoreAction.UPDATE, }); + // clear the shape and image cache so that any images in initialData + // can be loaded fresh + this.clearImageShapeCache(); // FontFaceSet loadingdone event we listen on may not always // fire (looking at you Safari), so on init we manually load all // fonts and rerender scene text elements once done. This also @@ -2360,6 +2363,15 @@ class App extends React.Component { return false; }; + private clearImageShapeCache() { + this.scene.getNonDeletedElements().forEach((element) => { + if (isInitializedImageElement(element) && this.files[element.fileId]) { + this.imageCache.delete(element.fileId); + ShapeCache.delete(element); + } + }); + } + public async componentDidMount() { this.unmounted = false; this.excalidrawContainerValue.container = @@ -3674,15 +3686,7 @@ class App extends React.Component { this.files = { ...this.files, ...Object.fromEntries(filesMap) }; - this.scene.getNonDeletedElements().forEach((element) => { - if ( - isInitializedImageElement(element) && - filesMap.has(element.fileId) - ) { - this.imageCache.delete(element.fileId); - ShapeCache.delete(element); - } - }); + this.clearImageShapeCache(); this.scene.triggerUpdate(); this.addNewImagesToImageCache();