Change image source (twice) when src does not exist

Question

I just started using Vue in the front-end of my website. In one of my Vue-components I want an image with a certain path:

<img src="path/example/with/vue/var">

Now, this is what I want to do:

Check if the file in "path/example/with/vue/var" exists

If not: Change the src to "another/path/with/vue/var"

Check if "another/path/with/vue/var" exist

If not: Change the src to "default/path"

I already tried to use onerror with a function inside of it. But the problem is I'm loading 100+ objects with a couple of images for each object. If I just check if the file exists the normal way(through Ajax or with an XMLHttpRequest), the performance is completely gone. All objects are loaded through a JSON file.

I hope you guys understand the question.

https://stackoverflow.com/questions/3537469/detect-image-load — Álvaro Touzón, Aug 01 '17 at 12:40

score 1 · Answer 1 · answered Aug 01 '17 at 12:40

1

I suggest you to use https://imagesloaded.desandro.com/

You can understand if the path exist in this way

$('#container').imagesLoaded()
  .always( function( instance ) {
    console.log('all images loaded');
  })
  .done( function( instance ) {
    console.log('all images successfully loaded');
  })
  .fail( function() {
    console.log('all images loaded, at least one is broken');
  })

In the Fail function you can re-make imagesLoaded() for another path and so on

answered Aug 01 '17 at 12:40

Irrech

1,277
2
13
18

Yes you can use also Vanilla – Irrech Aug 01 '17 at 12:42
Like Alvaro said, I'm using vue so I'm just going to use vanilla instead of jQuery – Sander Van Keer Aug 01 '17 at 12:42
@Irrech $=jquery – Álvaro Touzón Aug 01 '17 at 12:42
imagesLoaded( document.querySelector('#container'), function( instance ) { console.log('all images are loaded'); }); – Irrech Aug 01 '17 at 12:43
With imagesloaded you can check all images together if you use the container, or the single element, use this function for all element – Irrech Aug 01 '17 at 12:45

score 0 · Answer 2 · answered Aug 01 '17 at 14:15

An easy way to implement this would be to make a component out of the object you are using in your v-for loop.

Then you can simply used a computed property to check the src property on your object.

in this case you do:

const image = new Image()

And then set the src like so:

image.src = <object>.src

After you have set the src on the Image object you could then check if your specified image has loaded with onload or has failed with onerror.

I do something similarly in my code by check if an image has loaded or not so I can replace the placeholder image with the actual loaded image:

setImagePlaceholder(hotel) {
    this.$set(hotel, 'imgLoaded', false);

    const image = new Image();
    image.src = hotel.thumbUrl;

    image.onload = () => {
        hotel.imgLoaded = true;
    };
}

Don't know how I could make it any easier for you.

score -1 · Answer 3 · answered Aug 01 '17 at 12:47

-1

Herre a simple demo, you need to add the recurseve second try.

var img = new Image();

img.onload=function(){
     console.log('loaded!');
 };
 img.onerror = function(){
    console.log("error");
 }
 img.src='something';

answered Aug 01 '17 at 12:47

Álvaro Touzón

1,247
1
8
21

Any Ideas how to implement this in Vue? – Sander Van Keer Aug 01 '17 at 12:52

Change image source (twice) when src does not exist

3 Answers3