see if src of img exists

Question

when I place an img tag I create the src attribute dynamically. Is there a way of testing if the src (path where the image is located) actually exists with javascript in order to avoid getting:

enter image description here

you may want to consider using a server side script to check for this as browsers can have javascript disabled. — rogerlsmith, Jan 26 '12 at 17:27
Define "actually exists". Because of the cross-domain origin policy, you won't be able to examine the images the browser retrieves from the remote site using Javascript, so what you're asking for may be impossible. You can send the URL to the server and have it download the file, but that's a bad idea from a security standpoint. — Borealid, Jan 26 '12 at 17:28
I found this post. It should help you. http://www.irt.org/script/52.htm — Hector Sanchez, Jan 26 '12 at 17:29
I don't know why you people think I am doing this the wrong way. I have a folder where I place the common image extensions. for example I have an image named pdf.png, txt.png, .... etc many more. I have the most common ones and when the user uploads a file I will like to show a image of the file that he just uploaded. it is very easy to construct the img src just by knowing the file extension. I know I will be able to do this on the server side but it will require to much work. I will know display a default image for all the images that are unknown. Thanks a lot for help! — Tono Nam, Jan 26 '12 at 17:52

score 67 · Accepted Answer · edited Jun 02 '16 at 23:50

67

You can use the error event:

var im = document.getElementById('imageID'); // or select based on classes
im.onerror = function(){
  // image not found or change src like this as default image:

   im.src = 'new path';
};

Inline Version:

<img src="whatever" onError="this.src = 'new default path'" />

Or

<img src="whatever" onError="doSomething();" />

<img> tag supports these events:

abort (onAbort)
error (onError)
load (onLoad)

More Information:

edited Jun 02 '16 at 23:50

Funk Forty Niner

74,450
15
68
141

answered Jan 26 '12 at 17:28

Sarfraz

377,238
77
533
578

I saw in other forums, that it doesn't work in IE, is that correct? – Hector Sanchez Jan 26 '12 at 17:32
Right, thanks! Probably earlier versions, who knows xD thanks. – Hector Sanchez Jan 26 '12 at 17:40
8

and what happens, when new_default_path doesn't exists? will it be an infinity loop? – sasjaq Sep 04 '13 at 11:22
2

I prefer doing it in other way so that the UI won't wait until `onError` to hide the image, causing the broken img icon to flash. `` – tropicalfish Jan 29 '16 at 13:57

score 16 · Answer 2 · answered Jan 26 '12 at 17:29

16

you can make a previous ajax call (with head method) and see the server return code or you can use onerror event to change url or make it hidden, e.g.

<img src="notexist.jpg" onerror="this.style.visibility = 'hidden'">

(I've used inline attribute just to explain the idea)

answered Jan 26 '12 at 17:29

Fabrizio Calderan

120,726
26
164
177

Awesome example. Works like a charm. – tj-recess Jan 21 '17 at 18:48

score 6 · Answer 3 · edited Feb 06 '16 at 10:29

6

If you create the src dynamically with javascript you can use this:

var obj = new Image();
    obj.src = "http://www.javatpoint.com/images/javascript/javascript_logo.png";

if (obj.complete) {
    alert('worked');
} else {
    alert('doesnt work');
}

edited Feb 06 '16 at 10:29

Tommy42

128
1
7

answered Mar 30 '15 at 17:43

Alexandre Strapacao G. Vianna

399
3
14

1

The image exists in the following path, but it says 'no worky' when I run code snippet. Is it because of 'same origin policy'? – Yigitalp Ertem Dec 11 '15 at 08:47
it is because, obj.complete return false. the code get executed right away. while the state isn't in complete yet. so it always go to else block – Mohamed Allal Nov 21 '17 at 18:50

score 0 · Answer 4 · answered Jul 23 '22 at 03:45

easy

var x = new XMLHttpRequest(); x.open("get", "your_url.com/image.ext or /image.png or image.jpg", true);x.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) {alert('exist');}else{alert('does not exist'};}; x.send();

score -1 · Answer 5 · answered Jan 26 '12 at 17:33

-1

You're approaching this the wrong way.
When you generate your links with the server side script, check it there whether the file exists or not (by using file_exists() in PHP for example).

You shouldn't rely on JavaScript when you can do it in the server side, as JavaScript can be altered and disabled.

Ask yourself how are you generating the src= attributes, and check there whether the file exists or not, and provide an alternative.

answered Jan 26 '12 at 17:33

Madara's Ghost

172,118
50
264
308

This is very subjective: "You shouldn't rely on JavaScript when you can do it in the server side". I fully disagree, and the rationale is simply wrong. It's not because code can be altered that the user has an interest in doing so. The OP probably just wants to adapt the style of a web app if the image doesn't exist. Style is something that is in the client domain, and IMO, it should never occur server-side. Your point would be valid if the image was a secured resource that needed authentication to be displayed for example. – nimai Feb 07 '19 at 10:20

see if src of img exists

5 Answers5

Linked