如何在 React 前端网站上显示来自 Google Drive 的图像？

Question

我想在我的 Google 驱动器中上传一些照片，并希望我显示这些照片。我现在实际上正在使用 React.js，而且我对编程真的很陌生。我只想显示照片并有与照片相关的具体日期。我正在 google 和 youtube 上搜索，但仍然没有明确的答案。

Answer 1

首先，转到您的 Google 驱动器并以 public 模式分享 link 照片。

然后复制你照片的id link。

替换您照片网址的 ID => https://drive.google.com/thumbnail?id='your 照片 link id'

然后通过替换ID复制以上内容并粘贴到React Js App的Img Src中。

然后运行 React Js 应用程序

import React from 'react';

function App() {

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

export default App;

如果 Img 标签不起作用，请尝试使用此

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

我希望它有效。请注意我的导出视图缩略图大小，您可以根据您的样式要求更改大小。

Answer 2

尝试以下操作：

1) 获取您上传的 google 驱动器映像的 public link：

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

2) 从 link:

中提取 id

   my case: 1_aPIblL-tTtWKAADSSADASDNIloPB4QNlfFcl-

3) 在 react 中使用以下 url 结构：

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

4) 结果：

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

如有更多疑问，请观看我制作的此视频：https://www.youtube.com/watch?v=iajv8y-6n3Q。

如何在 React 前端网站上显示来自 Google Drive 的图像？

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

javascript

node.js

web

google-drive-api

reactjs