How do i remove broken image box?

user_2245080 0
Viewed 16037

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. enter image description here

html-table css html
9 Answers

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 "".

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