Ways to Import Images In React Js Project

hey hi guys welcome to the channel in this video i'm going to show you how you can import images in your react project it's very easy i'm going to show you two different ways and also going to explain you what's the difference between these two ways let's get started now this is the first way in this way we use import keyword to import our images let me show you how we use it the first step is very simple you go to your project folder you can see this is a project one this is my folder and inside src you go to basically src folder inside the src folder and there you create images folder here you can see i already have created images folder and then inside the images folder you put all of your images okay and now i'm going to show you how we can use these images in our project let me show you go to code you can see this is very simple code component just image tag and we have empty output here now how we can use this japan dot jpg in in this project is very simple just write down import and give name to your file i will call this img1 and write from and then here inside the quartz right on the path of that particular image which you wanted to import in my case it's japan.jpg so you can see it's inside the images and then the name of file so i will write down all this information here so it's dot slash images slash japan dot jpg save and still i'm not getting any output why because i already have imported it image is imported but i'm not calling it i'm not using it to use it i have to go to img tag and here inside the src i have to write down the name of that image so we have given this image we are calling this image img1 here you can see we have given this name img1 so i will just write down img one here and save and still it's not going to work save and save and still it's not working why because this import part is a javascript part so we have to write down this img one inside the curly brushes because in the react we write down all javascript code inside the curly braces so write down the curly braces and then write img-1 the file name and save and now it will work we got the image and that's how you import the image this this is the way number one now i'm going to show you the way number two the way number two it's similar to the html way instead of importing this writing this import we just simply give the path of image here in in the src let me just show you i will just copy this part and paste it here and removing this portion save and there you can see i'm not getting any output why because because because to use this simple way you must put your image inside the public folder let me show you how go to your project folder there you can see we have two folders src and public we have created images in src in the way number one in case of way number two we create images folder inside the public go to your public and then you create images folder and then there you put all of your images like i have rj.jpg here so i will go to my code and instead of japan.jpg i will write rj.jpg save and i will i get the image this is how you do it but suppose i don't want you to use this pathway okay i wanted to import this rj rg file so let me show you here i'll just write rj here and img one and this is not going to work why because this import method only works with the modules and modules are inside the src folder so save and we got the error why because it this way it doesn't work with the public folder if you are using import then your images must be inside the src okay and if you are using the pathway then your images must be in public folder so this is how you import images in your react project thank you so much for watching please like share and subscribe if you still have any doubt or question you can ask me in comment sections or in your or in social media thank you so much links will be in description bye take care [Music] you

Channel: Study Read Educate

Views: 181,981

Keywords: ways to import images in react js project, how to import images in react js, import images in react js, how to add images in react js project, add images in react js project, add image in react project, how to insert images in react js project, insert images in react js, reecry, react js

Id: MRbqLWAwqko

Length: 5min 30sec (330 seconds)

Published: Wed Oct 28 2020