Hello👋 beautiful developers, guess you doing great.
Importing images on react app is a big wahala (problem), I don't know about some people but it is for me. Mostly when I try to display it dynamically using an array.
Let me not divert from the topic:- There are different ways to import an image to react either by setting up your image under the Public folder or Src folder both ways display.
Public Folder
- Here you input the image as you will do on your HTML
How it is typed on text-editor
Display of the image on the browser
- It also works when you try to display it dynamically too
How it is typed on text-editor
Display of the image on the browser
Src Folder
Creating your image in Src Folder is different you use import, require, or Reactcomponent keyword.
i. Using Import Keyword
How it is typed on text-editor
Display of the image on the browser
ii. Using require Keyword
How it is typed on text-editor
Display of the image on the browser
iii. Using ReactComponent Keyword
How it is typed on text-editor
Display of the image on the browser
iv. Creating a file and putting all your images inside
a. first you create the file write your data(images)
b. You import the images to the app.js so it will display on your browser
How it is typed on text-editor
a.
b.
Display of the image on the browser
It is possible to display your image directly from the site, you can get the address of the image. it has a disadvantage; the network might be slow😡.
How it is typed on text-editor
Display of the image on the browser
Contact