In this video.
Let's see how we can use images and react.
Images and react can be used in gsx in two ways.
The first method is by using the IMG tag attribute and we can also use the background image properly
in conjunction with the style attributes.
So let's do that.
Well, inside my site, see, that is in my component.
Let's create a new folder and call it as images component because it's a good to play around with how
we can use images and let's create one component and call it adds just image dot js and let's go forward
using the array FC snippet and I have my snippet for that.
So let me save it.
And now let's go ahead and then render that component.
We will avoid going by this way or we come into the index and then I mean render the component, you
fix it very soon.
So this is my image component and there we go.
So let me render this component instead.
All right, now we have the image component.
So let's look at the first method.
We are going to use the IMG tag.
So we are going to render some nested elements.
So I'll put them inside the parent container and let me give it each one and call it as images in react.
All right.
So let's see how we can use image using the IMG tag.
So my opening and save closing image tag as that.
And here we specify the size attribute for this one.
We can use images locally or externally.
So first of all, let's use external images.
So let's go to this website or pixabay.com.
Here you can download free lenses, stock images for your future project.
So you can click on any of this one.
I like nature, so I'll click on this one and click on copy image address.
So inside my RC, I will provide the path to my image and let's see, let's refresh it.
And indeed, there we go.
And we can specify a style attributes providing the width of the image and the height of the image.
Let's see, 500 pixels.
And then the height also is going to be up.
It's going to be also 500 pages.
So let's save it.
And now we have perfect image is that this is the first option.
The second option is download the image and then host it locally on your machine.
So let's go ahead and download the same particular image.
So click on download and there you go.
My image has been downloaded successfully, so I'll copy that image.
And now inside my React project here, let me expand the Explorer here and inside the public.
You can put your images here or inside of RC.
We can create one file, sorry, one folder and call even US assets.
Or just images as that, and then I'll place my image inside.
Well, I didn't copy that.
So let me drag and drop inside the folder and there you go.
So let me rename the image.
The name is Too Long.
Let me call this one as agric.
So now I have my image.
How can I use it locally?
Now let's remove the RC, the first option here and let's go back the other option.
So here, because the file is inside this folder and it has nothing to do with the component to be able
to reference that we are going to import it.
So import and the name of the image we can make it any, any name here, let's say agric img and then
locate the path of the image which is dot slash, dot, dot slash and then images.
And now I have my agric image.
So now for the image didn't provide the same as RC and now because we want to inject some JavaScript,
put them in three places as that, and then you provide the name of the image and there you go.
We can also provide the attributes and let's say agric, so let's save it and now let's refresh it.
And it's also the same as before.
So these are the ways of of how we can use images.
And one more thing to like, we can also reference the image on inside our CSS file.
So let me show you what I mean here.
So let's say that inside my images component, let's create one file and call it as images dot CSS.
And now let's provide a class name called body container and then we can specify the height and say
100 VH.
The next attribute is going to be background, image or just background and then specify the URL where
we can trace the image.
So here dot, dot, slash, slash and inside images and I have my Greek image.
So now inside my image component, I can reference my, my CSS dot, dot, slash, slash images and
now I can even remove the IMG and now I want to provide a class name of, say, container, because
that's what you use inside the CSS, which is this.
So if I save it and now I have my image as well.
So whether you go by the using the IMG tag or going by the style, all right.
So that's how you make use of images and react.