【发布时间】：2021-10-27 10:37:27
【问题描述】：
我目前正在开发一个 React 应用程序，该应用程序将用户图像上传到 Amazon S3 服务器，在 python 后端将这些图像处理为 GIF，并将指向这个新生成的 GIF 的 Amazon S3 链接返回给 React。
当 GIF 准备好后，React 会显示一个标签以允许用户下载它：
<a href={urlToGif.current} download>Download Your GIF</a>
urlToGif.current 类似于 servername.s3.amazonaws.com/filename.gif
点击此链接成功下载一些具有正确文件名的文件。但是，当尝试使用 Mac Preview 打开此文件时，我收到“无法打开文件”错误消息（Mac Preview 通常支持打开 .gif 文件）。
另外，如果我将本地下载的文件拖放到 Firefox 中，我同样会收到 “图像无法显示，因为它包含错误” 消息。但是，没有提供有关具体错误的信息。
我仔细检查了我提供给上述 href 的 Amazon S3 网址。如果我从 DOM 元素本身复制它，并将其直接粘贴到新的浏览器选项卡中，它会将我带到正确显示的 gif，并且我可以从那里将文件另存为 .gif 没有问题。
我还从 url 中删除了 https:// 前缀以避免跨源问题，并且在 GIF 生成过程中的任何时候都没有在我的控制台中看到任何错误。
我确实会在下载之前在页面上显示从我的 python 后端返回的图像 url，它会按预期呈现 GIF，所以我相当肯定这不是我如何创建图像本身的问题。
我的预感是 URL 或我访问它的方式可能有问题。我已经研究了几天了，一直找不到解决方案。有没有人熟悉这个问题并且可以指出潜在的根本原因？
【问题讨论】：
-
用文本编辑器打开下载的“gif”（或尝试
head the-downloaded-gif.gif）。可能是您正在下载某些 404 错误或其他内容的 HTML，但只是将其命名为.gif。 -
@cbr 如果我使用 TextEdit 打开该文件，我会收到消息“您需要启用 JavaScript 才能运行此应用程序”。我还尝试使用 Sublime Text 3 打开它，它只会永久显示“正在加载图像”消息。
-
将
.gif更改为.txt。看起来您实际上是在将应用程序的 HTML 或文本下载到一个名为.gif的文件中。 -
@cbr，啊，你是对的。如果我以 .txt 格式打开它，我会看到一个 HTML 模板文件。你知道我怎样才能让它从那个href正确下载吗？
-
该 HTML 文件是否在您的 S3 存储桶中？那是您单击
download的应用程序的HTML 吗？<a>上是否有一些 onClick 处理程序，例如实际使用 React Router<Link>而不是 HTML<a>？所有浏览器都会出现这种情况吗？
标签： reactjs image download href gif