Anandkumar Mehta Anandkumar Mehta - 5 months ago 17
CSS Question

How do i remove broken image box?

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

Answer

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=" " />
Comments