How to prevent broken image link icon to show up

How can I prevent the annoying 'broken image link icon' to show up, when there's an image missing or broken link? For example:

brokenImageLinkIconExample2

I (need to) have the image in the html property, so I tried this which didn't work:

<img src=@{path}image.png onerror="this.style.display='none'">

or:

<img src=@{path}image.png onerror="src=@{path}invisibleImage.png">

It seems using 'onerror' is the way to go but I'm not sure how to get it working here.

Any help is much appreciated.

The onerror attribute is not allowed to prevent messing with scripts too easely, you could use a div with a style attribute to display an image without the default fallback image:

<div style="width:20rem; height: 20rem; background-image: url(@{path}image.png); background-size: contain"></div>

Thanks. This solution would have worked on a static button which always looks the same. However I failed to mention that the buttons I talk about are dynamic: a single dynamic button replaces any number of static buttons. This dynamic button frequently changes its appearance and function as if it were a different button each time.

Most buttons will not contain an image. But how to prevent the html code for image insertion to be executed? I don’t know if that’s possible. Conditional statements are not allowed in html afaik.

I have found a solution in which I just leave the image alone. Instead I make it completely transparant.

So when the button doesn’t contain an image, the ‘broken link’ symbol must be set to fully transparant which makes it invisible:

.imageStyle{
opacity: 0;
}

If on the other hand there is an image to be shown, the opacity should be something like 0.7

I retrieve .7 from a matrix with this code: #{@{buttonArray2}[VAR{buttonNumber}][20]}};

Bringing these together gives:

.imageStyle{
opacity: 0#{@{buttonArray2}[VAR{buttonNumber}][20]}};
}

which nicely translates/calculates to:

opacity: 0.7;

When the matrix has no entry for a picture trying to be read it returns ‘empty’.

Luckily 0 + empty doens’t translate to 0empty or to an error message, but to 0

And so it finaly works as intended. :slight_smile:

You can put conditional statements in html using the advanced syntaxes:

<div class="#{@{widget_id} ? "a" : "b"}">
JS{
var html = ""
// write to variable html
return html
}
</div>

That opens new possibilities. Thank you.