actual image is not rendering while using below code. (mxGraph)

Question

using the above code. I am unable to draw my image on the canvas. the provided image (see below) is rendered instead. Please help. Thank You

createImageShape(b64Image) {
        alert('Creating image shape.');
        if (this.initialized && this.graph) {
          console.log('this.graph');
          console.log(this.graph);
    
          const model = this.graph.getModel();
          console.log('this.model');
          console.log(model);
          model.beginUpdate();
      
          try {
            const vertex = this.graph.insertVertex(
              this.graph.getDefaultParent(),
              null,
              '',
              100,
              100,
              0,
              0,
              'shape=image;'
            );
      
            const image = new Image();
            image.onload = () => {
              const imgWidth = image.width;
              const imgHeight = image.height;
      
              // Update the vertex with the actual image dimensions
              const geometry = model.getGeometry(vertex);
              if (geometry) {
                geometry.width = imgWidth;
                geometry.height = imgHeight;
              }
      
              vertex.style += 'image=' + encodeURIComponent(image.src) + ';';
      
              // Refresh the graph to reflect the changes
              this.graph.refresh();
            };
      
            image.src = `data:image/png;base64, ${b64Image}`;
          } finally {
            model.endUpdate();
          }
        } else {
          console.log('Initialization is not yet complete');
        }
      }

Instead of actual image. below image is shown. (alt)

enter image description here