How to Import Images Using Next.js

ACCESS the FULL COURSE here: https://academy.zenva.com/product/full-stack-web-development-mini-degree/?zva_src=youtube-fullstackmd

TRANSCRIPT

What's up everyone and welcome to the next section. This'll be on importing images into our project. So we'll just import the images that we added to that images folder and we'll work on displaying them within our project itself. Okay? So let's head on over to the code. This is what it looks like, we've just got index dot JS packaged on J son. This is what our project looks like. This is my games page. Really simple right now. Okay, so before we go any further we need to make sure we have all the images we want. I think I actually left one image out. Yeah, I did. That was the logo. So let me just grab that now. Okay, actually I believe this is in downloads for me. I do want this logo in my project so I'm actually just going to copy that and bring it over to. Okay, cool stuff. So now we've got my four images. These are gonna be used to display the three games and then obviously the logo up top. So we'll now need to add the library that will help us to import and use images in our project. So let's just kill this command right now. We're going to, oops. I'm not sure why that came up. We're going to just clear that off. And we're going to install the next images library. So this'll be an NPM install, dash, dash, save. Next dash images. So it should say actually, and some of you may be experiencing a bunch of problems, where if you try to install something it comes up with a bunch of errors here. Likely, that's because you don't have administrative privileges. So if you're using windows, again, run the command prompt or power shell as an administrator. That's one of the options you can do whenever you go to open it, you can right click and run as an administrator. Or if you're using mac or lennox then you can simply add sudo to the beginning of any of your commands and that should allow you all the necessary permissions. Okay, so this will install that library. I think we should see some changes if we go to package dot J son. Yeah, we get next images there and we do need this library to be able to display images in our projects. All right, so before we can use our images there's gonna be one more step we need to take. That is going to be adding our index dot config dot JS file and specifying that we're using the images. This next images library. So we're going to go ahead and create a new file here. Let's give this a save. That was command, shift, save, by the way. Or you can just save as. And this is just gonna go into the project root, okay? This is gonna be our next dot config dot JS file. So in here we're going to say that we're acquiring the next images library so we're gonna do constant with images. This is ... https://www.youtube.com/watch?v=vlIX3r2BeV8