Best Way To Use Image In Your React Projects

Traditional ways of using images in react.js

1. Importing Images:

    import myImage from './images/myImage.jpg';
   

2. Using the required keyword:

    <img src={require('./images/myImage.jpg')} alt="img">
   

All the Traditional methods for using images in your react project have a drawback in that they load up your git repository.

But there is another way we can do that

1. Using URL as the source:

      <img src="https://example.com/myImage.jpg" alt="Img" />
   

So, how can you convert an image on your computer into a URL?

Step 1: Upload the image to your Google Drive

Step 2: Copy the image URL

Step 3: Get the image ID

To get the ID select the code after /d/ till the next forward slash(/)

https://drive.google.com/file/d/1CQprfvDdihKoFw21dYznnS4fSoo-odbM/view?usp=drive_link

ID = 1CQprfvDdihKoFw21dYznnS4fSoo-odbM

Step 4: Concat the Id with the given URL

1. First string: drive.google.com/u/0/uc?id=

2. id: 1CQprfvDdihKoFw21dYznnS4fSoo-odbM

3. Second String: &export=download

<img 
src="https://drive.google.com/u/0/uc?id=1CQprfvDdihKoFw21dYznnS4fSoo-odbM&export=download" 
alt="My Image" 
/>

To make Steps 3 and 4 easy I have made a website

Convert Google Drive link into image source link website