How to Add Image in React JS App [FULL GUIDE]

welcome to app style press how to add images and react.js I have created video on this this is update I am using react 18. we can add image and react to one by one multiple images referenced in a file images from Json file images from SRC directory and images from public directory in multiple ways in this video we will look into that but before that give this video a like subscribe to the channel if you haven't already because I am bringing similar content on this topic okay back to the topic I have two folders named as images One in SRC directory and the other is in public directory foreign PNG in public directory we've got directory named as images it's got three dot PNG 4.png5.png here is how we use single image import it import named import I'm naming it logo from images logo dot SVG this is being imported from SRC directory and then use it like this by using the import name Logo we can also use images directly without importing like this okay images One Dot PNG this image from images directory from SRC directory save and this is the image this is also being called from SRC directory and it's using require another way is to create a file with images inside SRC directory inside images directory we've got index.js file inside it I will declare a const with the name images it's an object and I will use images in this object I am jivan I am G2 require one dot PNG 2 dot PNG now these are key value pairs require is being used here this is also necessary now we have to export it because this is a Javascript file and it will be treated as a module so X for default images and here we will import it import images from images index.js and then we will use images from this file IMG SRC images like here one and two from SRC directory we can also use images from public directory public directory is not processed by a webpack use images directly IMG SRC images this is the folder name or directory name inside public directory three dot PNG full dot PNG save and have these are from public directory no require no import no curly braces just plain regular Syntax for the images we can also Place images from URL like a remote image like this this is the image just use image path as we do for an image and we can also use images from a Json file like here I have got a Json file images dot Json SRC directory now see the contents of this file this is Json file notice double quotes here index.js file but didn't use double quotes but this is Json so we have got double quotes so it's not like in Javascript file containing an object it is Json no require just image path but path is from public directory it's 4.png5.png these images from public directory it will use images from public directory and no export for this file because it's Json file not a JavaScript file but we will import it like this import named import from images dot Json this this is the file name images dot Json so we'll use this IMG as now let's use map method imgs and and ings dot map item return give e item dot ID this is the ID and this is IMG ing SRC item dot IMG save and here are those images and that's it in a react application it is usually best to place images in the public directory the public directory is meant for assets that need to be available to the client such as images fonts and other files the SRC directory is meant for source code and ulit should not contain Assets in the public directory we reference the images using a relative path and from there they are served by the web server and if the images are an SRC directory very important images in component file in this case webpack loads images but as I have shown you we have got multiple ways of using images in react.js doesn't matter images are in public directory or in SRC directory by using these methods we can use images from anywhere in the application so this is how we can use images in react.js Project okay I hope it helped license you subscribe and I will see you in the next video

Channel: WebStylePress

Views: 30,228

Keywords: how to add image in react js component, how to add image in react js app, How to add image in react from src directory, How to add image in react from public directory, How to add image in react without using import, how to add an image in react, how to add image in react component, How to add image in react using import, how to add image in react js project, How to add image in react using require, how to add image in react js, how to add multiple images in react js, react js, js

Id: u1HyG535JY0

Length: 8min 22sec (502 seconds)

Published: Sun Jan 15 2023