javascript - How do I display images from Google Drive on a react front-end website? - Stack Overflow

admin管理员组

文章数量:1345319

I want to upload some photos in my Google Drive and would like me to display those photos. I'm actually using React.js right now and I'm really new to programming. I just wanna display the photos and have the specific date related to the photos. I'm searching on google and youtube and I still have no clear answers.

I want to upload some photos in my Google Drive and would like me to display those photos. I'm actually using React.js right now and I'm really new to programming. I just wanna display the photos and have the specific date related to the photos. I'm searching on google and youtube and I still have no clear answers.

• javascript
• node.js
• reactjs
• web
• google-drive-api

Share Improve this question Follow asked May 1, 2021 at 8:42 SpicyyRiiceSpicyyRiice 16611 gold badge44 silver badges2121 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Try the following:

1) Obtain the public link of your uploaded google drive image:

   my case: https://drive.google./file/d/1_aPIblL-tTtWKAADSSADASDNIloPB4QNlfFcl-/view?usp=sharing

2) Extract the id from the link:

   my case: 1_aPIblL-tTtWKAADSSADASDNIloPB4QNlfFcl-

3) Use the following url structure in react:

 <img src="https://drive.google./uc?export=view&id=INSERT_HERE_YOUR_GOOGLE_DRIVE_IMAGE_ID" alt="drive image"/>

4) Result:

 <img src="https://drive.google./uc?export=view&id=1_aPIblL-tTtWKAADSSADASDNIloPB4QNlfFcl-" alt="drive image"/>

For further doubts watch this video: https://www.youtube./watch?v=iajv8y-6n3Q that I made.

First of all, Go to your Google Drive and Share the link of photos in a public mode.

Then copy the id of your photos link.

Replace the ID's of your photo urls => https://drive.google./thumbnail?id='your photo link id'

Then Copy the Above by replacing ID and Paste it in Img Src of React Js App.

Then Run React Js App

import React from 'react';

function App() {

  return(
    <div>
      <img src="https://drive.google./thumbnail?id='your photo link id'" alt="image" />
    </div>
  );
}

export default App;

If Img tag don't work, try to use this

<img src={require('https://drive.google./thumbnail?id='your photo link id').default} />

I Hope it works. Note my export view thumnail size, you can change the size according to your style requirement.

本文标签： javascriptHow do I display images from Google Drive on a react frontend websiteStack Overflow