Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Handle Image Loading Errors in Vue.js with RxJS and domStreams

    5.5.12 - 6.4.0

    When an image fails to load, it triggers an error event. You can capture the error event and merge it with your image loading stream to provide a backup image when things go wrong. This lesson shows how to load a placeholder image if the main image fails to load.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    Instructor: now imagine that there's an error in our URL and our image fails to load. If I click here and you can see that the image fails to load in the console, you can actually handle that in an interesting way because image has an error event. I'm going to stream this in as an observable.

    This domstream can be image error, and make sure to define it in our domstream, so image error. Then, our image can be an observable merge of this stream and an error stream. I'm going to extract this out real quick. I'll call this, "Load Image" stream. Then, I want a fail image stream, so I'll call this, "Fail Image."

    The Fail Image is this .image error mapped to whatever image you want to provide as a default. I'm going to copy and paste a placeholder service. Now our image stream becomes a merge, so observable merge of Load Image and Fail Image.

    Now if I click, you see we get our image failure. It failed, and we handled it with a placeholder. If I put my proper URL back in and hit Save and click, it'll properly load the image...