Split a Request into Data Stream and an Image Stream with RxJS and Vue.js
A single stream can branch off into many different streams based on how you need to handle each piece of information. This lesson shows how you take the data request and split it into a name$ stream and an image$ stream so that we can handle the image loading separately.
Instructor: [00:00] we'll make this a bit more interesting by loading an image. Instead of plucking the data and name, let's pluck the data. We'll call this "Person," and change this to Person. Then, we can create a name stream. I'll say constName is Luke pluck name, an image stream which can be Luke.pluck image.
[00:27] We'll return both of those. We'll return name at image, and then render both of them out inside of our template. We'll render out the name. For right now, we'll render out image right here to check that it's working. I'll click, and you'll see Luke. You'll see this image name. Let's go ahead and drop that inside of an image tag.
[00:49] We'll bind the source to image. The image actually is on the remote server. I'm going to have to map this image to the URL where it is, so starwars.egghead.training/, and then image. Hit Save there. Now when I click, it'll load in Luke and load in the image...