7 Ways to Use Images in ReactJS | React Images Tutorial | Learn ReactJS Assets Handling

welcome to webstylepress if you are new here  consider subscribing and hit bell icon there   are multiple ways to use images in react.js  depending on your requirement you can call each   image individually or you can create an object  list images in a file and call these from there   by using map function let's look into it this  is my app.js file and project is running here first of all let me show you i have got  this images directory in public directory   images folder in public directory and it's  got logo-one.png logo-2 logo-3 logo-4 inside   this images folder and then i also have got  img folder containing same images in src   folder then i have got index1.js in img folder  and i have got index2.json and index 3.js file so we have got two directories for same images   one is inside the public directory and  second in is inside src folder or directory one way to use images in react.js is to import it import let's say logo from img logo dash one dot png and then we can use it like this img src logo class name logo art save and this is the result we have got our logo logo two now this image is being called from img  directory that is inside src directory you need dot slash in path here in my case   dot slash means in same directory like app.js  is inside src and then it's got img directory   and then the image file without it import  won't work you can call image from src folder   or from anywhere in your app by using this  method our second way is to use require image required from img directory and then file  name save but it is not working   in case require doesn't work you can use dot  default after require and here is our image again you need this dot slash here in my case dot  slash mains in same directory without it require   won't work you can call image  from src folder or from anywhere   in your app by using this method  if i will remove this dot slash then it won't work so you need  this and now the image will work then we have got another method i have images  folder in public directory also this images folder   we can call images from public directory also  public directory is not processed by webpack   you don't need import statement to call images   from public directory just place images  in public directory and call like this images logo one save and is working logo 3 save and this is logo  3. public directory is outside src folder   this is public directory and this is src  directory and our app.js is inside src and public directory has got images folder but  we didn't use any path here if we use exact path   it won't work but dot slash will work but why use dot slash here don't use dot slash in  case you are using images from public directory so to call image from public directory this  is the method exactly like you use in html what if you need to use a remote image you  can use generic image tag and src method   as you do in html to display a remote  image in react.js from an image url   we will use remote image url from a website that is this website and it provides a url to display image in src we will just use this url save and this is the image you can also place image url  in a variable and call it like let url let's use this url here and instead of this path we'll use url  here that variable this will also work we used images one by one in these examples what  if we want to keep image urls in separate file   and call images from there one by one depending  on requirement or what if we want to apply   map function to call all  images from a separate file   we have solution for that as well let's  create a javascript file in img directory in our src folder we have got img  directory and we have got index1.js file   javascript file we are going to use require  but require needs dot default so const images logo one required logodash1.png dot default so this javascript file is inside img directory   that has got the images as  well so this is the path so here is logo 2 and it is also logo 2 and then let's use logo 3 here logo 3 and logo 4 like this and this is javascript  file so we will export it export   default images save and then we will call this  expo and then we'll import this export import images from it is inside img folder and file name is index one dot yes okay so now you can call individual images we have got this import images dot this logo one logo one we have got logo two logo three and four but three and four are inside home  so we will place home before it home dot logo   three and four save and here are those four images being called from here if you don't want to declare this  const here this method will also work like just use export default save and this method will also work you  can use this export default or this both are kind of same now let's use a json file to store image  path json file will be in src folder   this is src folder and this is index2.json file i'll comment this line and i will comment these so now this is index2.json dot  json file okay so this is json and let's use id one image images slash   logo dash one dot png so this is now being called  from this images folder from public directory similarly id2 and logo 2. so this is json file now we are calling images from public directory  in this case images folder is in public   directory also we are not exporting  this file we are not exporting it okay but we will import it import images from index2.json you can choose this name to your  liking you can use any name here or you can import this file with any name  so we have got this images import we have   got import with images within the name of images  and then we will use map function here so images and and so if we have got images if we  have got import then apply map function and we are calling each record  inside that import as item dave key scheme will be will extract id from  this item dot id and then we will use image and it will be item dot image so from this item we had id  and image here id image id image okay so we applied map function add this json  file to call images from public directory from this public directory from this part images right okay there is another way now we will again  use javascript file from src directory   and we will call images  from public directory again so now i will import images from index 3.js  index 3 dot gs and i will comment this import i will i will just copy it and i will close it this is index 3.js and we have this record inside it and we  will use const images is equal to this one now we don't need this and we will have to export it because this is  javascript file and it will act as a module   export default images and we imported this file   then the same map function will work images  images if we have got this image is import   then apply map function and extract id  and image from it and this is working 3 four and the images changed so these are several ways you can  use images in your react js app i showed you seven ways you can use  images in react.js in different ways   which method do you prefer all right  give this video like subscribe to   channel and press bell icon stay tuned  and i will see you in the next video

Channel: WebStylePress

Views: 63,704

Keywords: 7 ways to use images in reactjs, multiple ways to use images in react js, react display image from url, react dynamic image src, React images, multiple ways to use images in reactjs, react image example, images in react, ways to use images in react, images in reactjs, image react, react image tag, react image, import image react, react display image, images in react js, react js images, image in react js, how to add image in react js, How to import image in react js

Id: U07wzhfu66M

Length: 20min 23sec (1223 seconds)

Published: Fri May 14 2021