使用 JavaScript 以 HTML 形式显示 Google 云端硬盘中的图像时遇到问题
我正在努力使用 JavaScript 在我的 HTML 页面上显示来自 Google Drive 的图像。遵循在线指南并没有完全解决我的问题。 HTML（索引.html）： 我正在努力使用 JavaScript 在我的 HTML 页面上显示来自 Google 云端硬盘的图像。遵循在线指南并没有完全解决我的问题。 HTML（index.html）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Google Drive Image</title> </head> <body> <img id="imageElement" alt="A lovely image"> <script src="script.js"></script> </body> </html> JavaScript（script.js）： const fileId = '1BEW9tkgVKlp_ebUc17LkXDH-mnPc4ome'; const imageElement = document.getElementById('imageElement'); async function fetchGoogleDriveImage(fileId) { try { const response = await fetch(`https://drive.google.com/uc?id=${fileId}`); const url = URL.createObjectURL(await response.blob()); imageElement.src = url; } catch (error) { console.error('Error fetching the image:', error); } } fetchGoogleDriveImage(fileId); 背景： Google 云端硬盘中的图像设置为“知道链接的任何人都可以查看。” 尽管如此，图像仍无法在浏览器中加载，并且控制台显示错误。 附加HTML（纯html）： <body> <img src="https://drive.google.com/uc?id=1BEW9tkgVKlp_ebUc17LkXDH-mnPc4ome" alt="Your Image Alt Text"> </body> CodePen 示例 如有任何帮助，我们将不胜感激！谢谢。 虽然没有在任何地方发布（我发现），但 Google Drive 的服务器已开始拒绝附加这两个标头的请求： sec-fetch-mode: no-cors sec-fetch-site: cross-site 如果您将浏览器直接导航到文件的（直接链接）URL（即获取您的src URL并将其粘贴到浏览器导航栏中），但该请求期间的sec-fetch-mode标头将是设置为 navigate 并且效果很好。 但是，与您的 <img> 示例一样，如果请求源是网页，并且与 drive.google.com 来源不同，就会出现问题。 （您的浏览器将自动将这些 sec-fetch-mode 和 sec-fetch-site 标头设置为请求的一部分。） 这似乎是 Google Drive 自 2024 年 1 月 10 日开始的一项未记录的更改，我仍然找不到任何提及它的地方，因此尚不清楚此行为是否会持续存在，或者是否反映了意外更改或疏忽。 我也有同样的问题。临时解决办法是使用大宽度的驱动器文件缩略图 您正在此处执行所有操作，看来问题出在 Google 端，并于今天开始发生（撰写本文时为 2024 年 1 月 11 日）。 Google 可能会解决此问题并允许直接图像嵌入，或者他们可能会继续阻止它，这意味着您必须找到另一种方式来托管网站图像，例如 S3。 （可能）此处跟踪错误：https://issuetracker.google.com/issues/319531488?pli=1 我开始在 HTML 中链接 css 文件时遇到同样的问题。
const[imageContainer,setImageContainer] = useState([]) 常量导航 = useNavigate(); 使用效果(()=>{ Promise.all([ fetch("https://www.themealdb.com/api/json/v1/1/
请帮助我。这是我下面关于discord.js 聊天机器人的代码 const fetch = require("node-fetch"); const {ChannelType} = require("discord.js"); client.on('messageCreate...
如何检查 fetch 的响应是否是 javascript 中的 json 对象
我正在使用 fetch polyfill 从 URL 检索 JSON 或文本，我想知道如何检查响应是 JSON 对象还是只是文本 fetch(URL, 选项).then(响应 => { // ...
我按照步骤将 CakePHP 3.9 迁移到 4，前端工作正常，但管理不正常，这意味着我有一个 /site 路径和一个 /site/admin，在检查日志后我意识到
x_val, s_rate = librosa.load(文件名, sr=采样率) 文件“/python3.6/site-packages/librosa/core/audio.py”，第 140 行，位于 加载 y = sf_desc.read(frames=frame_duration, dtype=dtype,
023-06-25 07:18:17 默认[20230625t071600]回溯（最近一次调用）：文件“/layers/google.python.pip/pip/lib/python3.8/site-packages/gunicorn/ arbiter.py”，第 589 行，位于
使用 fetch() 时，Express.js res.redirect() 不起作用
当我使用 fetch() 访问具有 res.redirect() 的端点时，我不断收到 CORS 错误。只有当我使用 fetch() 时才会出现问题，因为如果我直接输入浏览器的地址，重定向就可以正常工作...
使用 TIMESTAMPDIFF 和 JPA 标准查询并使用 hibernate 作为提供者
我有一个数据表，其中包含设置和释放列，两者都保存时间戳。我的目标是使用 CriteriaQuery 创建与下面的 SQL 查询等效的查询。 SQL 查询：SELECT TIMESTAMPDIFF(SEC...
从 html 中提取 <h2> 标题文本，其中标题文本可能包含 <code> 和 </code> 标签
我有一个 html 文件，其中包含一些 标签，例如 一个<- ' 我有一个 html 文件，其中包含一些 <h2> 标签，例如 a <- '<section id="sec-standard-stoet-geary" class="level2" data-number="9.4"> <h2 data-number="9.4" class="anchored" data-anchor-id="sec-standard-stoet-geary"> <span class="header-section-number">9.4</span> Standardising PISA results</h2>' b <- '</span> <span class="fu">read_parquet</span>(<span class="st">"<folder>PISA_2015_student_subset.parquet"</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre> </div> </div> </section><section id="sec-leftjoin" class="level2" data-number="9.3"><h2 data-number="9.3" class="anchored" data-anchor-id="sec-leftjoin"> <span class="header-section-number">9.3</span> Linking data using <code>left_join</code> </h2> <p>' 我可以使用以下方法提取a的标题： str_extract_all(a, '(?<=(<[/]span>)).*(?=(<[/]h))')[[1]] %>% str_squish() > [1] "Standardising PISA results" 但是在 b 上尝试这个不会返回任何结果： str_extract_all(b, '(?<=(<[/]span>)).*(?=(<[/]h))')[[1]] %>% str_squish() > character(0) 编辑：从评论来看，这似乎是正则表达式无法解析换行符。 我尝试在正则表达式(?s)中启用单行模式进行解析，但它仍然不起作用 我会在这里使用 html 解析器而不是正则表达式： library(rvest) read_html(a) |> html_elements("h2") |> html_text() |> trimws() #> [1] "9.4 Standardising PISA results" read_html(b) |> html_elements("h2") |> html_text() |> trimws() #> [1] "9.3 Linking data using left_join"
有没有办法拦截FetchBackend的fetch请求来添加授权头？ 我尝试使用 HttpInterceptor 拦截这些获取请求，但它似乎不起作用......
NodeJS 18 对 fetch 提供了实验性支持 https://nodejs.org/dist/latest-v18.x/docs/api/globals.html fetch 函数抛出 FetchError 实例，我需要在 try-catch 中使用 insta 对其进行分析...
我已经构建了一个javascript函数来创建一个项目（=图片+标题+类别） 使用使用 fetch 的 API。 API响应后，我修改DOM以显示新的项目列表。 初始化...
如何使用 python 从 Fetch/XHR 获取 Respose JSON 数据？
如果我在 https://lei-registrations.in/portal 的搜索框中搜索数据“ditech process Solutions private Limited”，那么如何使用 pyt 从 Fetch/XHR 获取响应 JSON 数据或请求 URL...
回溯（最近一次调用最后一次）： 文件“C:\用户 ohzr naconda3\Lib\site-packages otebook Raittypes.py”，第 235 行，在 _resolve_classes 中 klass = self._resolve_string(klass) ^^^^^^^^^^^^^...
我通过 javascript fetch 调用身份验证服务来获取访问令牌。该服务是一个简单的 RESTful 调用。我可以使用 fiddler 看到调用成功（有 200 响应和 j...
GraphQL API 错误 - 不可哈希类型：“StrawberryAnnotation” - 五十一个应用程序
文件“c：\ Users idan \ AppData \ Local \ Programs \ Python \ Python311 \ Lib \ site-packages \ graphql xecution xecute.py”，第1036行，在await_result中 返回 build_response（等待结果，错误）#...
从 html 中提取 <h2> 标题文本，其中标题文本可能包含换行符
我有一个 html 文件，其中包含一些 标签，例如 一个<- ' 我有一个 html 文件，其中包含一些 <h2> 标签，例如 a <- '<section id="sec-standard-stoet-geary" class="level2" data-number="9.4"> <h2 data-number="9.4" class="anchored" data-anchor-id="sec-standard-stoet-geary"> <span class="header-section-number">9.4</span> Standardising PISA results</h2>' b <- '</span> <span class="fu">read_parquet</span>(<span class="st">"<folder>PISA_2015_student_subset.parquet"</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre> </div> </div> </section><section id="sec-leftjoin" class="level2" data-number="9.3"><h2 data-number="9.3" class="anchored" data-anchor-id="sec-leftjoin"> <span class="header-section-number">9.3</span> Linking data using <code>left_join</code> </h2> <p>' 我可以使用以下方法提取a的标题： str_extract_all(a, '(?<=(<[/]span>)).*(?=(<[/]h))')[[1]] %>% str_squish() > [1] "Standardising PISA results" 但是在 b 上尝试这个不会返回任何结果： str_extract_all(b, '(?<=(<[/]span>)).*(?=(<[/]h))')[[1]] %>% str_squish() > character(0) 编辑：从评论来看，这似乎是正则表达式无法解析换行符。 我尝试在正则表达式(?s)中启用单行模式进行解析，但它仍然不起作用 我会在这里使用 html 解析器而不是正则表达式： library(rvest) read_html(a) |> html_elements("h2") |> html_text() |> trimws() #> [1] "9.4 Standardising PISA results" read_html(b) |> html_elements("h2") |> html_text() |> trimws() #> [1] "9.3 Linking data using left_join" 这是一个辅助函数，它将选择具有跨度的 H2 元素，但会忽略跨度 library(xml2) geth2 <- function(x) { temp <- read_html(x) %>% xml_find_all("//h2[span]") xml_remove(xml_find_all(temp, ".//span")) temp %>% xml_text() %>% stringr::str_squish() } geth2(a) # [1] "Standardising PISA results" geth2(b) # [1] "Linking data using left_join"
CryptographyDeprecationWarning：Python 核心团队不再支持 Python 3.6
我将系统从 python 2 升级到了 python 3，现在当我运行代码时： 从 cryptography.hazmat.backends 导入 default_backend 我收到这个错误 /usr/local/lib/python3.6/site-packages/
我已经做好了管道。效果很好。突然它给出了类似的错误 2015-12-18 02:39:08.091 GMT] 错误 system.core ISH-CORE-2368 Sites-SiteGenesis-Site core Storefront [uuid] [request-id...
Javascript 获取速度很慢（60 毫秒 vs 3 毫秒）
在我的机器上运行 Javascript fetch 每次调用大约需要 60 毫秒。与 3ms 的 Python 请求相比，这要慢得多。 问题 为什么 fetch 这么慢？ 有什么办法可以加快速度吗？ ...
我写了一个简单的自定义钩子。它所做的只是通过 fetch 调用 api，将数据保存在一个状态中，然后返回该状态，以便组件可以使用它。 下面是 useTodo 的代码...
如何在 Windows 64 位上使用 Anaconda 安装 ImageMagick？
我下载了适用于 Windows 64 位的 ImageMagick 文件 ImageMagick-7.0.4-4-Q16-x64-dll.exe （链接）并安装了它。 我正在使用 Anaconda，但出现以下错误： C:\Anaconda2\lib\site-packages\
usercustomize.py 自动运行但不存储变量和函数
我已按照本主题中的说明进行操作： 有没有办法让python启动时始终执行脚本？ （类似 R 中的 site.profile） python3 -m site 的部分输出： USER_SITE：'/home/<
GET /sites/{site-id}/drive/root:/{item-path} 停止工作
我正在使用 API 调用在我们的一个 SharePoint 网站中查找文件，我创建的流程直到本周星期一都运行良好。 API 返回“itemNotFound”错误。 我不知道
函数 fetchBooks() { fetch('圣经书.php') .then(响应=> { 如果（！response.ok）{ throw new Error('网络响应不正常'); } 返回response.json(); ...
我正在使用 Apache 服务器。 我想在访问 site.com/{URI} 时显示 site.com/site/{URI} 的内容，但我不想要任何重定向。我也无权访问配置文件，只能访问 .hta...
是否可以使用flutter将文件保存到闪存驱动器？ 我正在使用带有 USB c 端口的随身碟，如下所示： https://www.bestbuy.com/site/sandisk-ultra-dual-drive-go-1tb-usb-type-a-usb-type-c-flash-
如何在不破坏 Python 中子模块导入的情况下覆盖包的 __init__.py？
我正在开发一个项目，我需要覆盖位于 ./lib/python3.9/site-packages" 目录中的文件。我有以下钩子，它使用 importlib.util 和 sys.meta 来完成此操作...
如下面发布的代码所示，我试图将值access_token从fetchAuthenticationToken传递到Ws.js中的方法fetch。 在 fetchAuthenticationToken 中，我收到了 access_...
“Access-Control-Allow-Origin”-Twitch API 出现错误
我尝试在一个小型 JavaScript 项目上使用 twitch.tv API 获取一些数据。 这是获取请求： fetch("https://api.twitch.tv/helix/chat/emotes/global", { 头...
Apple App Site Association 与角度路线冲突
有人可以阐明如何设置 iOs 应用程序链接以用于 Angular 吗？ 基本上我想在发送给用户的邮件中添加一个链接，然后在安装了该应用程序后打开该应用程序。 我在 src/.w...
假设我有一个 ReadableStream 对象（来自 Streams API Web 标准）： 让 ReadableStream = (await fetch('http://example.com')).body; 我知道我可以逐块读取它，其中块大小通常...
我正在尝试执行同步循环，直到成功获取 URL。 这是我尝试过的： 让 res = null fetch("https://jsonplaceholder.typicode.com/users/1").then((res...
OpenAPI 生成器 - typescript - 如何设置 API 密钥？
使用 OpenAPI typescript Generator，如何设置 API 密钥？ 这是使用 typescript-fetch 生成器执行此操作的方法 const api = new DefaultApi(新配置({ apiKey: apiEndpoints.
在 Cypress 中，如果我有一个触发异步操作（如 fetch）的按钮，并且我想验证单击此按钮最终不会触发错误，这是否足够？ cy.findByTe...
Veracode 扫描显示 fetch 函数中存在低级漏洞。解决这个问题的最佳方法是什么？ const 响应 = 等待获取（url，{ 方法：'POST'， 标题：{ '内容类型'：'
link rel=preload 可以与 fetch 一起使用吗？
我有一个大的 JSON blob，我想在我的网页中预加载。为此，我已将 添加到我的页面。我还有一个 JS 请求要 fe...
我正在为汽车库存实现一个 GraphQL API，它存储注册、inDate、outDate 等信息。 我需要实现一个 fetch API 来检索所有来的汽车的信息...
我知道这真的很微不足道，也不那么重要，但它可以节省我的一生...... 您知道可以在 PHP 中的 if 块中声明变量 if( $row = $sql->fetch ){ //做一些事情...
我有一个 API 端点，可以从服务器清除缓存。端点需要在 API 调用中传递身份验证令牌。当我尝试通过邮递员请求 API 时，它可以工作......
Nuxt 3：如何从浏览器网络 Fetch/XHR 请求列表中隐藏服务器 api 调用请求？
我有 Nuxt 3 项目，有两个页面和一个服务器 api： 配置文件：nuxt.config.ts 导出默认的defineNuxtConfig({ 路线规则：{ '/api/**': { 缓存：{ maxAge：60 ...
遇到问题。我将使用 python 显示代码片段： 从缓存工具导入 TTLCache 缓存 = TTLCache(maxsize=SOME_SIZE, ttl=SOME_TTL) def fetch(key): 如果密钥不在缓存中： 结果=数据...
来自 Node.js 的 Fetch() 调用总是创建新的 Express 会话
下面是网上商店服务器的精简部分，具有 2 个 API：./login 用于登录，./products 用于显示产品。产品仅应在成功登录后显示。 我正在使用 TypeScript ...
JS Fetch 在给定“application/json”标头时返回 HTML
我有一个 API 的获取请求代码，我知道它会返回 JSON（请参阅下面的节点 - https 请求。）但是，即使我设置了“应用程序...”的标头，响应也会以 text/html 形式返回。
在 React 中使用 fetch 与 Flask app.route 无法获取正确的信息
我目前正在尝试使用 React 前端和 Flask/Python 后端创建一个标准网站。我有一个单独的文件 server.py，我在其中从 NewsAPI 获取数据并解析它： 从烧瓶我...
我正在使用 fetch 来获取数组数据，然后将它们推送到一个数组中，这样我就可以将它们显示为我的反应本机选择器项目，这是我的代码： 状态={ 选定值：''， 数据 ： [] };
在NextJS中使用'fetch'或其他方法代替'fs'读取markdown文件
我正在制作一个博客，其中包含 Markdown 页面上的数学公式。我将 Markdown 文件存储在本地文件夹中。这是我的博客页面.tsx- 从“反应”导入反应 从“fs”导入 fs
无法使用推送流将 azure tts 从服务器传输到客户端；客户端的响应大小为 0，服务器正在工作
我正在尝试使用 Fetch API 和 PassThrough 推送流将 Azure TTS 从我的服务器流式传输到客户端。预期结果是分块接收流。实际输出是
我刚刚开始学习 html 所以我想尝试使用 download 属性 我刚刚开始学习 html，所以我想尝试使用下载属性 <a href="../images/clunk.jfif" download="ur_mum"> <img src="../images/clunk.jfif" alt="ur mum" width="200" height="200"> </a> 图像存储在同一个网站上，但是当我单击它而不是下载时，它只会使图像全屏显示。 我尝试尽可能地排除故障，但没有成功 我能找到的关于为什么某些文件类型发生这种情况但并非所有文件类型的原因是这个答案关于pdf下载与预览的类似问题 - 如果可以的话，请将以下标头添加到服务器端的图像响应中： Content-Disposition: attachment; filename=clunk.jfif 或者，您可以使用自定义 onclick 处理程序替换锚标记，该处理程序将图像转换为数据 URL 并触发下载： <img src="../images/clunk.jfif" width="200" height="200" onclick="downloadImage(this)"> const downloadImage = async (img) => { // fetch the image's media type const mediaType = fetch(img.currentSrc, { method: 'HEAD' }) .then(res => res.headers.get('content-type')) .catch(() => 'image/png' /* default to png if request fails */) // place the image on a canvas element const canv = Object.assign(document.createElement('canvas'), { width: img.naturalWidth, height: img.naturalHeight, }) const ctx = canv.getContext('2d') ctx.drawImage(img, 0, 0) // download the canvas data const a = Object.assign(document.createElement('a'), { download: 'filename', href: canv.toDataURL(await mediaType), }) a.click() }