I am making a tooltip with images and other data for a mouseover event in my D3 project. I would like to use a default image when my data images are missing. I am not able to get onerror to work with the html string I have written and I would be grateful if someone could take a look at it for me. I think my trouble iw with formatting of this string.
This is the relevant bit of code:
.on("mouseover", function(d) {
d3.select(this)
.transition()
.duration(50)
div.transition()
.duration(200)
.style("opacity", .9);
div.html('<img src="images/'+ d.properties.objectNumber +'.jpg" onError="this.onerror=null;this.src="images/00037631.jpg" style ="width:4em;" /> ' + d.properties.name)
//div.html('<img src="images/'+ d.properties.objectNumber +'.jpg" onError="this.src="images/ANMS0533[020].jpg" style ="width:4em;" /> ' + d.properties.name)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
My image shows up fine where it exists, but if the image is missing I get a no image icon and I would like to see a default image, or nothing.
I hope someone can help.
I would probably solve this problem like this, either use id or class on the uploaded img tag then select it using d3 and append on on error event to it.
.on("mouseover", function(d) {
d3.select(this)
.transition()
.duration(50)
div.transition()
.duration(200)
.style("opacity", .9);
div.html('<img id="loadingPic" src="images/'+ d.properties.objectNumber +'.jpg"/> ' + d.properties.name)
d3.select("#loadingPic").on("error", function(){
let el = d3.select(this);
el.attr("src", "images/00037631.jpg").style("width", "4em");
el.on("error", null);
})
//div.html('<img src="images/'+ d.properties.objectNumber +'.jpg" onError="this.src="images/ANMS0533[020].jpg" style ="width:4em;" /> ' + d.properties.name)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})