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

Question

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

Answer 1

首先，转到您的 Google Drive 并以公开模式分享照片的链接。

然后复制照片链接的 id。

替换您的照片网址的 ID => https://drive.google.com/thumbnail?id='your照片链接 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) 获取您上传的谷歌驱动图片的公共链接：

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

2)从链接中提取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。