jQuery, Check if image exists returns false negative

Question

I'm trying to determine if an image exists before inserting it into the site.

I've tried all the methods here and all of them return a negative for an image I know exists. For example:

$.ajax({
url:'https://s3-eu-west-1.amazonaws.com/stuffstory-v2-filepicker/thumbnails/5547b98e357a7f425f8b4570/555340a1357a7f673a8b456b.png',
type:'HEAD',
error:
    function(){
        console.log('No image')
    },
success:
    function(){
        console.log('There is an image')
    }
});

Returns a no image result, but when if you follow the link: Image It's clearly there.

I am utterly flummoxed as to why.

try this http://stackoverflow.com/a/16596437/1113766 – Juan May 13 '15 at 19:19 — Juan, May 13 '15 at 19:19

score 4 · Answer 1 · answered May 13 '15 at 19:13

4

Your cross-domain AJAX request is blocked by CORS security policy:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

answered May 13 '15 at 19:13

Serge K

375
3
12

Shimon Rachlenko · Answer 2 · 2015-05-13T19:23:17.347

3

You can use the Image for this:

var imageUrl = 'https://s3-eu-west-1.amazonaws.com/stuffstory-v2-filepicker/thumbnails/5547b98e357a7f425f8b4570/555340a1357a7f673a8b456b.png';
var img = new Image();
img.onload = function(){
    // will be called if image exists
};
img.onerror = function (){
   // will be called if image failed to download
};
img.src = imageUrl;

This way the images can be downloaded cross-domain. See also Image on MDN.

edited May 13 '15 at 19:23

answered May 13 '15 at 19:15

Shimon Rachlenko

5,469
40
51

Now the existing images show as true, but so do the non-existent images. I have 9 image spots, 3 with existing images, 6 without. I got 9 positives – Paul Aston May 13 '15 at 19:20
In my tests, if image does not exists, the error callback is triggered. Can you post your attempt? – Shimon Rachlenko May 13 '15 at 19:25
Interesting. It seems to work on this Fiddle http://jsfiddle.net/7z8t84fg/, but not on my development site, which is only local so I can't share it. I am iterating through a number of images, based JSON response, I'm wondering if this could be the problem – Paul Aston May 13 '15 at 19:34
Which browser do you use? And how this is not working? Does it report the non-existing as existing or existing as not existing? – Shimon Rachlenko May 13 '15 at 19:52

imbondbaby · Answer 3 · 2015-05-13T19:22:39.550

0

As stated by @crashet

No 'Access-Control-Allow-Origin' header is present on the requested resource.

For an alternative:

Use onerror Event

Execute a JavaScript if an error occurs when loading an image:

HTML:

<img src="https://s3-eu-west-1.amazonaws.com/stuffstory-v2-filepicker/thumbnails/5547b98e357a7f425f8b4570/555340a1357a7f673a8b456bewweweg" onerror="imgError()" />

JS:

function imgError()
{
alert('The image could not be loaded.');
}

JSFiddle Demo

More info: http://www.w3schools.com/jsref/event_onerror.asp

edited May 13 '15 at 19:22

answered May 13 '15 at 19:16

imbondbaby

6,351
3
21
54

This is brilliant. And I'm sorry, I should have said, I'm using the image as a background image. Can I apply this to that? – Paul Aston May 13 '15 at 19:24
@PaulAston With background images, there is no event... Sorry! – imbondbaby May 13 '15 at 19:48

score 0 · Answer 4 · answered May 13 '15 at 19:26

You are calling a request that is on different domain from your app thats why it is restricting this. if you will open your console window you will see the error. you need to achieve this using cors. reference http://www.html5rocks.com/en/tutorials/cors/

score 0 · Answer 5 · answered May 13 '15 at 19:37

0

You can use jsonp requests to load cross domain resources for example image in your case

answered May 13 '15 at 19:37

Rakesh Garg

27
2
5

score 0 · Answer 6 · edited Jul 14 '19 at 06:52

0

You can do this :

$(function () {
   //Image Error
   $("img").on("error", function () {
     var $img = $(this);
     var imgsrc = $img.attr("src");
     $img.attr("src", "New Image Path");
   });
});

edited Jul 14 '19 at 06:52

Afsanefda

3,069
6
36
76

answered Jul 14 '19 at 04:27

Jamin Lin

1

jQuery, Check if image exists returns false negative

6 Answers6