diff --git a/src/util/graphic.ts b/src/util/graphic.ts
index 09c84953c4..ef13f24708 100644
--- a/src/util/graphic.ts
+++ b/src/util/graphic.ts
@@ -81,6 +81,7 @@ import {
  */
 export {updateProps, initProps, removeElement, removeElementWithFadeOut, isElementRemoved};
 
+/* global Image */
 
 const mathMax = Math.max;
 const mathMin = Math.min;
@@ -191,6 +192,10 @@ export function makeImage(
     rect: ZRRectLike,
     layout?: 'center' | 'cover'
 ) {
+    const resizeZRImg = (width: number, height:number) => {
+        const boundingRect = { width, height };
+        zrImg.setStyle(centerGraphic(rect, boundingRect));
+    };
     const zrImg = new ZRImage({
         style: {
             image: imageUrl,
@@ -201,14 +206,16 @@ export function makeImage(
         },
         onload(img) {
             if (layout === 'center') {
-                const boundingRect = {
-                    width: img.width,
-                    height: img.height
-                };
-                zrImg.setStyle(centerGraphic(rect, boundingRect));
+                resizeZRImg(img.width, img.height);
             }
         }
     });
+    if (layout === 'center') {
+        const img = new Image();
+        img.onload = () => resizeZRImg(img.width, img.height);
+        img.src = imageUrl;
+        resizeZRImg(img.width, img.height);
+    }
     return zrImg;
 }