I am trying to add one or more satellite images for small regions, which have been tiled and packed into a KMZ file, to Openlayers 5. I manage to download the KMZ file from the server and unzip it. Then I read the KML file within. However, the image itself is never shown and the function ‘iconUrlFunction’ is never used. Could someone help me with my code?

My current approach looks like this (I add KMZ only if files on server are available):

if(lConfig['kmzFiles']!=null && typeof lConfig['kmzFiles']!="undefined" && lConfig['kmzFiles'].length > 0) {
    let urls = ['https://stuk.github.io/jszip/dist/jszip.min.js','https://stuk.github.io/jszip-utils/dist/jszip-utils.min.js'];
    let loadedScripts=0;
    //adding required scripts to DOM
    urls.forEach(url => {
        let script = document.createElement('script');
        script.src = url;
        script.type = 'text/javascript';

        script.onload = function() {
            //console.log(url + ' has been loaded');
            loadedScripts++;
            //run code only once all scripts are loaded
            if (loadedScripts === urls.length) {
                //adding new group to which KMZ layers are added
                let group = new ol.layer.Group({
                        title: 'Background Images',
                        fold:'close',
                        visible:false,
                        layers:[]
                    });
                lMap.addLayer(group);
                //function for loading KMZ files and add the to Openlayers
                createKmz_Layers(group, lConfig);
            }
        };
        script.onerror = function() {
            console.error('Error loading KMZ script: ' + url);
        };

        document.head.appendChild(script);
    });
}

//class for KMZ files. Taken from https://openlayers.org/en/latest/examples/drag-and-drop-custom-kmz.html
class KMZ extends ol.format.KML {
  constructor(opt_options,zip, kmlData) {
    const options = opt_options || {};
    //this function is somehow never used ?????????????????
    options.iconUrlFunction = function(href) {
          const index = window.location.href.lastIndexOf('/');
          if (index !== -1) {
            const kmlFile = zip.file(href.slice(index + 1));
            if (kmlFile) {
              return URL.createObjectURL(new Blob([kmlFile.asArrayBuffer()]));
            }
          }
          return href;
        };
    super(options);
    this.zip=zip;
    this.kmlData=kmlData;
  }

  getType() {
    return 'arraybuffer';
  }

  readFeature(source, options) {
    return super.readFeature(this.kmlData, options);
  }

  readFeatures(source, options) {
    return super.readFeatures(this.kmlData, options);
  }
}

function createKmz_Layers(group, pConfig) {
    
    for(let i = 0; i < pConfig['kmzFiles'].length;i++) {        
        let kmzUrl = 'https://...';
        //Loading KMZ from server
        JSZipUtils.getBinaryContent(kmzUrl, function(err, data) {
            if (err) {
                console.log('Error while reading KMZ file', err);
            }
            //reading/unzip KMZ
            JSZip.loadAsync(data).then(function(zip) {
                  const kmlFile = zip.file(/.kml$/i)[0];
                  if (kmlFile) {
                    //read KML file data from KMZ (ZIP)
                      kmlFile.async("string").then(function (content) {
                            //create new layer with KMZ class as format
                            let layer = new ol.layer.Vector({
                            title:lLayerName,
                            source: new ol.source.Vector({
                              url: kmzUrl,
                              format: new KMZ({},zip,content)
                            }),
                            visible:false
                        });
                        //setting z index to show on top of OSM
                        layer.setZIndex(99);
                        //adding layers to group dynamically
                        if (group.getLayers){
                             let existingLayers = group.getLayers(); 
                             existingLayers.push(layer); 
                             if (existingLayers instanceof ol.Collection){
                               group.setLayers(existingLayers);
                             }
                         }
                      });
                  }
            });
        });
    }
}

Basically, the code runs fine but the image is never shown and I don’t know what to change.

In the KMZ, there exists one .kml file and the rest are .png files with the tiled images.