Complete React Tutorial (& Redux) #33 - Importing Images

Key Takeaways

or rather than gang so I just want to give you a quick lesson now on how we can use images inside our components so to do this I'm going to use just an image of a pokeball to put a little background to each one of these different posts on the homepage so first of all you'll notice in my files over here I have a poke ball dot PNG file you can find this on my github repo I'm going to leave the exact link for that image down below in the description so just place that in your source folder directly in the source folder and we're going to use the inside this whole component so first of all to use an image inside a component what we have to do is import that image so at the top just say import and we'll call this pokeball from and then we need to jump out of the current directory and then grab the polka ball dot PNG file all right so that's what we're doing we're just importing this pokeball from this file now we can use this thing in the template down here so we want to output it for each individual post and I'd like to output that just above this div right here okay so the first div stays the same underneath that directly we're going to output this image so let's do an image tag first of all now the source of this image this is going to be this thing up here that we just imported and it's going to work out the source for us we don't have to do a path to the source we just have to output the name of the thing we imported in curly braces so poke ball and that's all there is to it let's give this a little alt description so a Pokeball like so save that and if you in the browser and we get this gigantic poke ball in each one of these things so that was very easy right all we had to do was import it and then use it as the source like so but it still looked a bit khaki so let's go to the CSS file index dot CSS and just spruce this up a little bit so first of all what I'm going to do is grab the home component then the post and then the image inside that because remember we have over here a class of container which will also give a class of home so that's the whole class right here yeah then we're looking for a post class and that thing is right here so that's going to be nested inside and then we want the image inside that alright so let's save this and go back over here so let's grab that image and then what we want to do is position this absolutely so absolute and then we'll say from the top we want it to be 20 pixels from the left we want it to be minus 100 pixels so it goes off the card to the left a bit the opacity is gonna be not 0.6 just so it fades out a little bit now let's also spell position currently and save this view it in a browser and now we can see this part of the poke ball inside the card but we also need to make this thing right here overflow:hidden so that we don't see the stuff that goes outside of the card so again let's go down here and we'll say we want the home dots post to say overflow:hidden like so and then we'll also give this oops a padding-left property and that's going to be about 80 pixels just so the pocket ball has a bit of room to breathe so let's have a look at this now alright looking better so now we have that little pocket ball on the side of each individual post now I'm just going to change the text color of this thing right here now to do that I'm going to go to our template and where we output this title right here I'm going to give this a glass of red - text so save that review this in a browser and of that is looking better all right my friends so that is how we use images in a react component