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

Fix graph not loading when the img loads too fast or fail to load

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', () => {

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,9 +85,16 @@ 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);
             })
         )
-        )
       );
     }