How do i remove broken image box? - html

Question

I am trying to build an email template in which i have to show some images to different mail client (eg.. outlook, thunderbird...). Now problem is when these clients does not allow to show image at that time broken image box is displaying which i don't want to display.
I had also refer
Refered link 1: How to remove borders around broken images in webkit?
Refered link [2]: input type="image" shows unwanted border in Chrome and broken link in IE7
Refered link [3]: How to stop broken images showing
but not able to find any proper output.
Note : I can not use div tag. I must have to use table tags.
CODE What I am using :
<table style="background:#fff; width:600px; margin:auto auto;">
<tr>
<td>
<a href="http://www.sampleurl.com">
<img src="http://sampleimageurl.com/sampleimage.png" height="55" width="198" />
</a>
</td>
<td style="text-align:right;"><a href="http://www.sampleurl.com" target="_blank">
<span style="font-family:Myriad Pro; color:#0d5497; font-size:20px;">www.sampleurl.com</span>
</td>
</tr>
<!--<tr>
<td colspan="2" style="height:1px; background: #0d5497;"></td>
</tr>-->
OUTPUT what i get.

Answer 1

use alt here for fallback
demo
html
<img src="abc" alt="image" />
css
img {
width:200px;
height:200px;
}
Alternatively, if you dont want to show any alt text, just give a blank space.
demo here
HTML
<img src="abc" alt=" " />

Answer 2

I know I'm late to the party but I didn't see a simple solution that used native javascript. Here is the solution I came up with
<img src="https://test.com/broken-image.gif" onerror="arguments[0].currentTarget.style.display='none'">
onerror calls a function, passing an error event as an argument. Because the argument is not actually defined as 'error' we need to get it from the arguments array that all functions have. Once we have the error we can get the currentTarget, our img tag, and sent the display to none.

Answer 3

I think you can use on error event on img.
here is a simple solution
Please pay attention that this script uses onDomReady event. In this case you should write:
<script type="text/javascript">//<![CDATA[
$(function(){
$('img').on('error', function () {
$(this).remove();
})
});//]]>
</script>
UPDATE
Why do you load images ? You can attach this image to email and show it via CID

Answer 4

You could any other element instead of and IMG and set the background-image using CSS. If that image is not found, you will not get the strange looking box.
<span style="background-image:url('http://sampleimageurl.com/sampleimage.png'); display:inline-block; width:198px; height:55px">
element with background
</span>

Answer 5

Sounds like a tough call not being allowed to use ALT text
If whoever is making this decision is convinced by a bit of styling you can do that e.g.
<img src="logo.jpg" width="400" height=”149″ alt="Company Name" style="font-family: Georgia; color: #697c52; font-style: italic; font-size: 30px; background:#ccffcc">
see http://jsbin.com/IcIVubU/1/

Answer 6

use this code block in your mail content to keep unrendered image as hidden.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<img id="imgctrl" src="imgs/sandeep11.png" onerror="$('#' + this.id).hide();" alt="Alternate Text" />
concept is.. use any CDN jquery reference then only jquery code will work. and I guess your src image path also should be some live url. if not then, it should be in attachment.
Please Click on "Show Remote content" to get remote urls into
thunderbird. this is security constraint of thunderbird. that's why
your images are not being loaded.

Answer 7

I know it is an old question but I found I had this problem too today (08 January 2020) and found a way to get around it.
I tested with the latest versions of Firefox and Chrome, I still could not find a solution for Safari.
Firefox:
For firefox you must add alt=" " note the space
Chrome:
For Chrome it must be alt="" note the empty space
The problem is that when I add the space the icon shows up on Chrome and disappears on Firefox, and vice versa when I remove it.
I added just a space because I did not want any text showing up on the image.
I did not have to add any of the following lines for it to work (I saw many solutions proposing some or all of them), but I left them in just in case
border: none;
outline: none;
border-image: none;
From there I guess it would be detecting a the browser in JavaScript and changing the alt attribut to " " or "".

Answer 8

document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll('img').forEach(function(img){
img.onerror =function(){this.parentNode.removeChild(this);
})});

Answer 9

DEMO
you can remove img by javascript:
arr = document.getElementsByTagName("img");
for(i=0; i<arr.length; i++){
if(arr[i].src=="")
arr[i].parentElement.removeChild(arr[i]);
}