Handle Image Loading Errors in Vue.js with RxJS and domStreams
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.
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...