Errors when trying to load remote textures as sprites

Hi,
I know this is quite old thread but I’m having an issue assigning the sprite asset generated this way to a button.hoverSpriteAsset.

I use the same procedure to get from remote server 4 images for entity element, button hover, button pressed and button inactive. The one I load into element.spriteAsset works fine, but others just don’t show and no errors are thrown.


Here’s the result of console logged assets: the first one is the equivalent of your spriteAsset variable and the second is the content of button.hoverSpriteAsset after I assigned the asset to it.
And this is my code:

createSpriteAsset(app, name, texture, width, height, callback = null, returnSprite = false) {
        var atlas = new pc.TextureAtlas();
        atlas.frames = {
            '0': {
                rect: new pc.Vec4(0, 0, width, height),
                pivot: new pc.Vec2(0.5, 0.5),
                border: new pc.Vec4(0, 0, 0, 0)
            },

        };                        
        atlas.texture = texture;

        var sprite = new pc.Sprite(app.graphicsDevice, {
            atlas: atlas,
            frameKeys: '0',
            pixelsPerUnit: 1,
            renderMode: pc.SPRITE_RENDERMODE_SIMPLE
        });

        if(returnSprite) {
            return sprite;
        }

        var asset = new pc.Asset(name, 'sprite', { url: '' });
        asset.resource = sprite;
        asset.loaded = true;

       callback(asset);
    }

The texture I assign to atlas is created this way:

loadRemoteTexture(app, url, callback) {
        var image = new Image(),
        texture = new pc.Texture(app.graphicsDevice, {
            format: pc.PIXELFORMAT_R8_G8_B8_A8,
            minFilter: pc.FILTER_LINEAR_MIPMAP_LINEAR,
            magFilter: pc.FILTER_LINEAR,
            addressU: pc.ADDRESS_CLAMP_TO_EDGE,
            addressV: pc.ADDRESS_CLAMP_TO_EDGE,
            mipmaps: false
        });

        image.crossOrigin = "anonymous";
        image.src = appConfigData.remoteHost + url;

        image.onload = function () {
            texture.setSource(image);

            callback(texture, this.width, this.height);
        };
    }

For each sprite I set the asset, the frame (0) and, only for hover, the imageEntity for the fallback.

Any hint?
Thanks in advance

Would you be able to provide a small public repro project for people to look at please?

You may find this engine code example helpful for this https://playcanvas.github.io/#/user-interface/button-sprite