How do i remove broken image box?

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

score 6 · Accepted Answer · answered Dec 30 '13 at 09:33

6

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

answered Dec 30 '13 at 09:33

NoobEditor

15,563
19
81
112

i had try this. but the thing is i am not allow to display alt text. either i have to show image or nothing. not even broken image icon and box – Anandkumar Mehta Dec 30 '13 at 09:35
2

Why are you not allowed to show alt text or use a div in your email? – putvande Dec 30 '13 at 09:36

score 6 · Answer 2 · answered Jun 14 '16 at 16:48

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.

score 3 · Answer 3 · edited May 23 '17 at 11:53

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

edited May 23 '17 at 11:53

Community

1
1

answered Dec 30 '13 at 09:38

Alex Kapustin

1,869
12
15

jQuery dependant in email template? – Shaun Hare Dec 30 '13 at 09:39
ah, this is for email.. than forget this answer :) – Alex Kapustin Dec 30 '13 at 09:41
Nice idea though, surely standard js might work - but js execution in some clients maybe an issue – Shaun Hare Dec 30 '13 at 09:43
@Anand Mehta, Why do you load images ? You can attach this image to email and show it via CID – Alex Kapustin Dec 30 '13 at 09:58
Generally Javascript in emails is stripped y the client for security reasons – geedubb Dec 30 '13 at 23:52

Rob Audenaerde · Answer 4 · 2013-12-30T09:38:03.490

1

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>

edited Dec 30 '13 at 09:38

answered Dec 30 '13 at 09:31

Rob Audenaerde

19,195
10
76
121

I already mention that i am not able to use div tag. i had also try that to. but i am restrict to use of div tag – Anandkumar Mehta Dec 30 '13 at 09:32
Removed the div (Although I do not understand why you cannot use it). You can basically use ANY element and use CSS to style it properly. – Rob Audenaerde Dec 30 '13 at 09:34

score 1 · Answer 5 · answered Dec 30 '13 at 09:39

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/

score 1 · Answer 6 · answered Dec 30 '13 at 10:04

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.

score 1 · Answer 7 · answered Jan 08 '20 at 06:26

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

score 0 · Answer 8 · answered Jun 28 '18 at 18:43

0

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

answered Jun 28 '18 at 18:43

xpredo

1,282
17
27

While this code may answer the question, it is better to explain how to solve the problem and provide the code as an example or reference. Code-only answers can be confusing and lack context. – Robert Columbia Jun 29 '18 at 01:24

score -1 · Answer 9 · answered Dec 30 '13 at 09:45

-1

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]);
}

answered Dec 30 '13 at 09:45

mehdi

1,755
2
15
21

1

What is this ? o_O You just remove all images. `if(arr[i].src="") ` this is always true :) anyway images are always with src, url is broken for some images – Alex Kapustin Dec 30 '13 at 09:47
Don't use javascript in email. That is just evil. – Rob Audenaerde Dec 30 '13 at 09:49
No, it's just a simple code that remove image with empty *src* attribute, see DEMO again. – mehdi Dec 30 '13 at 09:51
@RobAu so use this for create template before send. – mehdi Dec 30 '13 at 09:53

How do i remove broken image box?

9 Answers9

Related