fix: image width not being set properly (#143)

* Fix image width not being set properly Sometimes it got set to 0 because the original image wasn't loaded yet. * fix: eslint Co-authored-by: dicedtomato <[email protected]>
diced · Jun 5, 2022 · 74f3b3f · 74f3b3f
1 parent 181833d
commit 74f3b3f
Showing 1 changed file with 8 additions and 8 deletions.
diff --git a/src/pages/[...id].tsx b/src/pages/[...id].tsx
@@ -32,16 +32,16 @@ export default function EmbeddedImage({ image, user, pass }) {
   const updateImage = async (url?: string) => {
     const imageEl = document.getElementById('image_content') as HTMLImageElement;
 
-    const original = new Image;
-    original.src = url || dataURL('/r');
-
+    const img = new Image();
+    img.addEventListener('load', function() {
+      if (this.naturalWidth > innerWidth) imageEl.width = Math.floor(this.naturalWidth * Math.min((innerHeight / this.naturalHeight), (innerWidth / this.naturalWidth)));
+      else imageEl.width = this.naturalWidth;
+    });
+
+    img.src = url || dataURL('/r');
     if (url) {
       imageEl.src = url;
-    }
-
-    // Sometimes gives blank image on first load
-    if (original.width > innerWidth) imageEl.width = Math.floor(original.width * Math.min((innerHeight / original.height), (innerWidth / original.width)));
-    else imageEl.width = original.width;
+    };
   };
 
   useEffect(() => {