Display Icons / Images from JSON File in React JS | React JSON Tutorial
HTML-код
- Опубликовано: 13 сен 2024
- 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 All Types of Dat...
Fetch Data from JSON File in React JS | React JSON
• Fetch Data from JSON F...
7 Ways to use Images in React JS
• 7 Ways to Use Images i...
Easy Way to use Images in React JS | No Import | No Require
• Easy Way to Use Images...
Require Image Not Working in React JS
• Require Image Not Work...
Multiple Images in One Import
• Multiple Images in ONE...
Multiple Sets of Images from One Import in React JS
• Multiple Sets of Image...
Display Records or Data from JSON File in React JS
• Display Records or Dat...
Default Map is not a Function in React JS
• Default MAP is Not a F...
Async Await Fetch in React JS
• Multiple Ways of Async...
ReactJS Playground
• ReactJS Playground
Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT
Channel: / webstylepress
Website: www.webstylepr...
FaceBook: / webstylepress
Twitter: / webstylepress
GitHub: github.com/web...
#ReactJS #React #JavaScript #JS #JSON #WebDevelopment #Data #Fetch #Map #WebStylePress
![Fetch Data from JSON File in React JS | React JSON [ UPDATED ]](http://i.ytimg.com/vi/aJgAwjP20RY/mqdefault.jpg)
Thank you very much! I spent hours trying to do this with no success and now I did!
Again, thank you very much!
Thank you man, I was looking for this !!! 😍
Yahoo! I finally got it working! Thank you!
Thank you soo much! You have been a helper!!!
P.S: First comment I am making with this account!
I struggled for 3 hours but did not get the proper method you help a lot. Thanks Man.
You got my subscribe, very well explained and to the point, thx
Got it .....i was suffering then i found your video....then i place my images folder in src to public
Thanks a lot. Good initiative man.
Thank you so much this is helpful for me
Spot on! Thank you
thank you very much
well done and thanks a lot. Keep on.
Thank ❤❤
Thank You So much!!!
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!
Same here
how to do this in reactnative??
Thank you, you have saved us... we are grateful
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?
Please were you able to solve this?
Thanks a lot bro
🙏👍
I am using React icons Like this how get this from JSON... need help
{
icons: "", //By using string
or
icons:"AnynameOfIcon" // by using component name
}
how to convert string to component ?
For react icons you dont have to use string, you can just use manually there like this:
"icon":
I have to add ../ before images to make it work, wondering why...
./ means same directory.
../ represents moving up one level in the directory hierarchy from current location.
../../ represents moving up two levels in the directory hierarchy from current location.
@@webstylepress Thank you! I got confused when referencing images from CSS sheet and JS components.
YOU SIR! ....hahahahah YOU SAID THE RIGHT THING!!!!! THAT MAKE MY PICS APEAR!!!! THANK YOU!!!!
@@coreydevl7021 not a SIR hahaha, but congrats!
Thank u broo! it only works in public folder??
there are multiple ways. i have shared a video on 7 ways to use images in react
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.
which theme you are using in vscode?
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": "../public/assets/images/abc.jpg
Next.js serves static files under the /public directory. These files are accessible at the root level URL.
So, if your image is located at /public/assets/images/abc.jpg,
it can be accessed via /assets/images/abc.jpg in your code.
JSON file: {"icon": "/assets/images/abc.jpg"}
JSX:
import Image from 'next/image';
import imagePath from './images.json';
O DEUS DO GAME ME SALVOU PQP
Can i use image storage in src file ?
When i use image in src file json can't render it
how to add multiple images sir
with json in react js
I can't find your image folder in the video
wach the video again. may be increase speed but don't skip from timeline.
can i pass videos to react popup video player using the same way ???
Yes
My images are coming in vertical, but I want them in horizontal. How can I do that?
There must be block level element wrapping your images. Use inline elements or use inline block in CSS or use CSS flexbox or CSS grid to display images in a row or in one line.
What if the images are in src folder, how to import them?
There is link in description for video: 7 Ways to use Images in React JS
in my json file images not display
Use require() function it will work
@@shehinmelto6203 please how does one go about using the require function? Mine too isn't showing, it just shows a mini blank img icon on the web page
react fontawesome icons ? 😑
Thank you so much