Display Icons / Images from JSON File in React JS | React JSON Tutorial

How to display images from JSON file in React JS? How to use Icons from JSON file in React JS? We can create JavaScript file, define an object in it, require images, import that file, and use images from that. This is straight forward. In this video we will use images in JSON file, and display those images in React JS. To do that, we have to create JSON file. I have JSON file inside src folder in React JS project. Let's put data in it. Opening and closing square brackets. Inside this array, we can store objects with curly braces. Three objects in JSON file array. Each object can have properties with key value pairs. We stored images in directory named as images. This is our JSON object containing IDs, images names and images URLs. We do not need to export this JSON file. In case of JavaScript file, we export that. But not for JSON file. We import JSON file with any name. Inside React JS main return statement, we take a div. Then we use curly braces and write our logic inside it.

We use JavaScript map method on JSON object import. JavaScript Map method, maps each item in array to something else. Map takes a callback function that can have three parameters (value, index, array). We will need only value here. Map will return a new array. We can use a function or arrow function as callback on each element in array.

Images are coming from JSON file. Image paths are defined in JSON file. So where is this images directory or where are these images located. Inside Public directory, we have images folder containing these images. This is important. If you want to display images from JSON file,
keep these images in public directory.

Also notice that for image tag we did not use require for image. Require image may not work here where images are defined in JSON file and are being loaded from public directory. So this is how you can easily display images in React JS defined in JSON file.

I have similar videos related to images and React JS. From this channel if you go to channel and search for 'images react', you will find very important and interesting tutorials related to using images in React JS in multiple ways. Learn how to add image in react js or add image in react js. React image is used with simple img tag in JSX but there are few things that are important in case of using image in react js or react images. Also learn how to import image in react js or display image in react js. Easy way to import image in react js. Fix broken image react js.

Fetch All Types of Data from JSON File in React JS | React JSON Tutorial

Fetch Data from JSON File in React JS | React JSON

7 Ways to use Images in React JS

Easy Way to use Images in React JS | No Import | No Require

Require Image Not Working in React JS

Multiple Images in One Import

Multiple Sets of Images from One Import in React JS

Display Records or Data from JSON File in React JS

Default Map is not a Function in React JS

Async Await Fetch in React JS

ReactJS Playground

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

#ReactJS #React #JavaScript #JS #JSON #WebDevelopment #Data #Fetch #Map #WebStylePress

[biigattu]

Thank you very much! I spent hours trying to do this with no success and now I did!
Again, thank you very much!

[er_hd]

Got it was suffering then i found your video....then i place my images folder in src to public

[hasnainmalick]

I struggled for 3 hours but did not get the proper method you help a lot. Thanks Man.

[aidarousjibril]

Hi, in my json file imgUrl: points images inside the public folder but it doesn't show anything, it is same as yours but y json data are just nested, do you know the problem plse?

[franklinodigbo]

Thank you soo much! You have been a helper!!!

P.S: First comment I am making with this account!

[sherothkar]

I am using React icons Like this <AnynameOfIcon size={20}/> how get this from JSON... need help
{
icons: "<AnynameOfIcon size={20}/>", //By using string
or
icons:"AnynameOfIcon" // by using component name
}

how to convert string to component ?

[bonpipi]

Yahoo! I finally got it working! Thank you!

[aliceandreethiel]

Thank you man, I was looking for this !!! 😍

[mahisahusahu]

Thank you so much this is helpful for me

[trinhquangtoan]

Can i use image storage in src file ?
When i use image in src file json can't render it

[richardmillman]

If I wanted to get a specific icon based on the id from the json file, how would I do that? SO I have the complete json file, but I want to pick which icon I show. The full solution I am trying to implement is displaying files with an associated icon. The files are coming from a different json stream that I'm already mapping.

[adelinrapcore]

You got my subscribe, very well explained and to the point, thx

[mel.w]

I have to add ../ before images to make it work, wondering why...

[cfuvcdn]

Hello, sir thank you for this video.
Is it the same way in Nextjs?
My images are in the public folder. is it correct to address it like this?
"icon":

[WaddupBoi]

I had an images folder inside the src folder and used that directory in my JSON file but that didn't work. This did though so thanks!

[stayalivewithjohn]

how to add multiple images sir
with json in react js

[obettaaugustine]

I can't find your image folder in the video

[AbdielAldana]

Thank you, you have saved us... we are grateful

[adarshjadon]

My images are coming in vertical, but I want them in horizontal. How can I do that?

[kshitijkarkera]

What if the images are in src folder, how to import them?