Hotspot image pop-up issue

I have an image which should pop up when the user clicks the button(Hotspot), facing an issue with: “cannot read property of element/ undefined !”, the image is in the Image folder inside the Assets. Inside the hierarchy its under root => 2d screen => image element.

I’ve tried various methods of JS for getting it worked, but there are no results. Here’s the last JS that I’ve tried. Please if anyone can help us out with this issue @yaustar @Albertos @Leonidas

var Button = pc.createScript('button');

Button.attributes.add('UiImageEntity', {type: 'entity', description: 'on button clicked event handle'});
Button.attributes.add('audio', {type: 'entity'});
// initialze

Button.prototype.initialize = function () {    
    var self = this;
    var image = new Image();
    image.Origin = "Annotation";
    image.onload = function() {
        var img = new pc.Texture(;
        var material = self.entity.screen.texture;
        texture.image = texture;
    image.src = this.url;
    this.entity.button.on('click', function () {
        this.imageEntity.element.image = this.entity;
    }, this);

Button.prototype.update = function () {

Button.prototype.tap = function () {"push");


Hello @Holo_Siksha and welcome! I think the the problem is a mismatch in your naming. Try to change the name of your first attribute to imageEntity instead of UiImageEntity.


Also this line looks unusual. I don’t think element.image exist and I also don’t think this.entity is an image, but maybe you use a way that I haven’t seen before in PlayCanvas.