Hi,
The problem:
We like to show an external picture from some website in a detailpanel - for example a picture of a some parts of a some sort of a machine (a washing machine door rubber for example)
Now we are not sure if a part has a picture yet but we do know a part of the endpoint
So when we call said picture it might not exist and will result in a 404 and in a browser or html control it will result in a small red cross to explain the picture does not exist.
A probable solution
Say we can define some arbitrary htmlcode with some javascript in some sort of html control which we can put on a javascript eventlistener:
<img id="myimage" src="https://cdn.2ba.nl/FCRL/ETIMPictures/EC000084.png">
<script>
// the above URL is not valid and results in a 404.
var img = document.getElementById("myimage")
if (img.complete) {//do some neat stuff if it works}
else {
img.addEventListener("error", function() {
img.src="https://www.acto.nl/wp-content/uploads/2017/02/Acto-logo-2014-rgb-L-transparant.png" // the backup picture
}
)
}
</script>
This will result in showing the backup picture, because the original EC000084.png will fail to load and gets caught in the error that is generated by the listener.
The current HTML control doesn’t seem to be willing to consume any javascript.
Other solutions are welcome!
Best answer by René W
View original
.