如何在flutter中显示动画gif？

Question

我正在尝试在 flutter 中显示 gif。

我正在使用代码

Image(image : NetworkImage(message.image_url))

但是显示错误：

Another exception was thrown: Exception: HTTP request failed, statusCode: 403, https://media.giphy.com/media/13AXYJh2jDt2IE/giphy.gif%20

Answer 1

将

gif

放入项目的图像文件夹中，并在

pubspec.yaml

文件中提及它，就像处理图像一样。

Image.asset(
  "images/loading.gif",
  height: 125.0,
  width: 125.0,
),

Answer 2

这是 Flutter Gallery 应用程序中用于显示来自网络的 .gif 的内容

Image.network('https://example.com/animated-image.gif')

Answer 3

我找到了一种方法，您可以使用 @Nudge 答案在您的应用程序中下载并添加 giphy.com 的 gif。

这是你可以使用的技巧-

Giphy 的 .gif 网址示例 - https://giphy.com/gifs/congratulations-congrats-xT0xezQGU5xCDJuCPe

1. 您必须在

   -

   之后拆分网址的最后一部分。

2. 将最后一部分插入以下网址：

   https://i.giphy.com/media/${URL_PART}/200.gif

   。

3. 在这种情况下，

   URL_PART

   将是

   xT0xezQGU5xCDJuCPe

   。只需将其替换为上面的网址即可。

4. 您将得到以下输出网址： https://i.giphy.com/media/xT0xezQGU5xCDJuCPe/200.gif

检查一下。我希望它能帮助某人。 ;)

Answer 4

Giphy 不允许您加载图像。 flutter对此无能为力：https://en.wikipedia.org/wiki/HTTP_403

Answer 5

添加新资源到assets时，重启ide

Answer 6

更新@Chetan Goyal 的答案。现在它会抛出错误图像数据的异常。

要显示来自 Giphy 的类似于

https://giphy.com/gifs/congratulations-congrats-xT0xezQGU5xCDJuCPe

的 URL，我们需要提取连字符后面的部分，即 xT0xezQGU5xCDJuCPe 并将其添加到此 URL：

https://i.giphy.com/media/${URL_PART}/200.gif

希望它对某人有帮助。

Answer 7

来自资产

将 gif 放入项目的 images 文件夹中，并在 pubspec.yaml 文件中提及它，就像处理图像一样。

    Image.asset(
    "images/loading.gif",
    height: 125.0,
    width: 125.0,
),

来自网络

使用网络图像显示 url 中的 gif。

Image.network('https://example.com/animated-image.gif')