Loading Images with JavaScript

[00:00:01]
>> Sean: So, let's jump on our dove server, local host 8080, great.
>> Sean: So, if we were going to load this image and we wanna use it, we can now technically import it, right? Because that's what the loaders really enable Webpack treats everything like JavaScript when it comes to loaders so now you can use it like it's JavaScript.

[00:00:24]
So if we start in our entry point here, Index.js. We could technically now say like import image from, I think I call that Webpack logo, yep, .Jpg. Now, if I was to console log this, what we should inspect what it looks like. I think this is really what the most valuable is, cuz you actually get to see what it converts it to, right?

[00:00:54]
So if we look at our console,
>> Sean: Whoa, what is this? It is a base 64 data URI of the image.
>> Sean: So technically, we've created this image and stored it in the JavaScript itself. And like if we wanted to actually apply this now, I think what's really cool that we should do is we could take and let's write another module that takes a image URL and then adds it to and returns like an element, right?

[00:01:29]
So that's kind of cool. This is what's beautiful about modules so I could make a make image function or we could just call it image.js and we could say const makeImage = (url),
>> Sean: Or a function that takes a URL and does document. Then we can take image = document.createElement("img").

[00:02:02]
Let's do this, there you go, okay? And then we'll say, image.src = url and then we return the image.
>> Sean: Make sense so far? Now of course we need to export this. So export default makeImage.
>> Sean: And let's jump back into our entry point and we'll leverage it.

[00:02:36]
So import,
>> Sean: MakeImage from image.js cool, so now it did a reload for us. Haven't used it yet so let's actually declare this element or actually append it now. So we could say,
>> Sean: Const image = makeImage and then maybe instead, we'll rename this to imageUrl, right? Cuz that's really what we're getting out of it.

[00:03:23]
>> Sean: And let's append it. Maybe I'll do it between, I'm just gonna.
>> Sean: [LAUGH] Whoa that's huge. [LAUGH] Let's see.
>> Sean: I kind of expected it to be a little bit large. I mean, not that large.
>> Sean: See, I think you can set height and width directly on the image property, right?

[00:03:58]
So we could say like, image.height, 100 pixels, image.width. Now of course, this isn't very reusable code if you wanted to created images of many sizes. What, is it just 100?
>> Sean: There we go, cool, I like it.
>> Male: Can you go back to image.js for a second? I didn't get a chance to-

[00:04:32]
>> Sean: Yeah, so that's where I'm at right now.
>> Sean: So if we wanted to, let's say, we could get creative, we could do something like this and say, height = 100, width = 100. There we go and then that way we can just take height and width. Cool, now we're like, now we have some reusable.

[00:05:05]
I love this about modules because it's like we can instantly make things really compostable and powerful.
>> Sean: Awesome.
>> Male 2: Quick question about the hot module reloading?
>> Sean: Yes.
>> Male 2: I was noticing when I was changing things like I changed the text in a file, in a JS file-

[00:05:26]
>> Sean: Yep.
>> Male 2: It was refreshing the page rather and then just [INAUDIBLE]
>> Sean: Correct.
>> Male 2: That's suppose to happen.
>> Sean: Yeah, absolutely, so essentially to use Hub, and I don't dive into it too deep because it's kind of, it's more of something like if you really wanna use it standalone, you come at a little cost of some overhead API's.

[00:05:45]
It's usually applied through a loader, like react-hot-loader or view loader does it. But essentially to do so you'd have to have something like if hot.module.expects or accepts. And then the path of the module that is in relation and then what happens is that the surface API just basically says you reimport that file.

[00:06:11]
And so, that's how you're patching in the new change. But you have to do it at a per module level when it comes to your JavaScript. So, this is something that's usually abstracted with a loader. But, yes, that behavior is expected.