Merge pull request #4496 from moka-care/bug/4439_graph_doesnt_load_wh…

…en_img_fail_to_load Fix graph not loading when the img loads too fast or fail to load
mermaid-js · Jul 18, 2023 · e66135b · e66135b
2 parents 072638c + 9e5ccbe
commit e66135b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -695,6 +695,15 @@ A ~~~ B
       {}
     );
   });
+
+  it('4439: Should render the graph even if some images are missing', () => {
+    imgSnapshotTest(
+      `flowchart TD
+    B[<img>]
+    B-->C[<img>]`,
+      {}
+    );
+  });
   describe('Markdown strings flowchart (#4220)', () => {
     describe('html labels', () => {
       it('With styling and classes', () => {

diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js
@@ -66,8 +66,11 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
       await Promise.all(
         [...images].map(
           (img) =>
-            new Promise((res) =>
-              img.addEventListener('load', function () {
+            new Promise((res) => {
+              /**
+               *
+               */
+              function setupImage() {
                 img.style.display = 'flex';
                 img.style.flexDirection = 'column';
 
@@ -82,8 +85,15 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
                   img.style.width = '100%';
                 }
                 res(img);
-              })
-            )
+              }
+              setTimeout(() => {
+                if (img.complete) {
+                  setupImage();
+                }
+              });
+              img.addEventListener('error', setupImage);
+              img.addEventListener('load', setupImage);
+            })
         )
       );
     }