Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

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

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

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

    John LindquistJohn Lindquist

    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.

    vueVue.js
    ^2.0.0
    rxjsRxJS
    ^5.0.0
    Code

    Code

    Become a Member to view code

    You must be a 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
    Transcript

    Transcript

    Instructor: 00:00 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.

    00:19 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."

    00:45 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.

    01:09 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...

    Discuss

    Discuss