html网页中的gif动画不正常显示,谁知道原因

Posted 2023-04-28

我有一个gif格式的动画，就是说是一个动态的图片，我把它加入到html格式的网页中，想看到动态效果，但是只显示为静态的图片，请问谁知道是为什么？
我在IE中浏览时也是没有正常显示，所以我不知道问题出在那里？

HTML是支持gif图片，显示不出来的原因可能如下：

1、语法写法错误，正确的写法如下：

<img src="/i/eg_tulip.jpg"   />

2、注意路径问题，要使用相对路径防止路径问题导致显示不出来的问题。

参考技术A 插入后是静态的，只有在预览时候它才动。用 IE 打开Html的网页就可以了。
补充：这个我也不太清楚了，可能是你的[软件]的问题，我现在用Macromedia Dreamweaver 8.0 做的网页都是正常的。
以前做网页时也有过那种情况，另一种怀疑是没有[建立站点]，或是目录中有中文字符（这一般不会有太大影响）的原因。
不过虽然在本地无法正常浏览，但是上传到服务器上，打开网页后是正常的。 参考技术B 用 IE 打开Html的网页就可以了。插入后是静态的，只有在预览时候它才动。
可能是你的软件的问题，用Macromedia Dreamweaver 8.0 做的网页都是正常的。
另一种怀疑是没有建立站点，或是目录中有中文字符的原因。
不过虽然在本地无法正常浏览，但是上传到服务器上，打开网页后是正常的。 参考技术C 插入后是静态的，只有在预览时候它才动。用 IE 打开Html的网页就可以了。
补充：这个我也不太清楚了，可能是你的[软件]的问题，我现在用Macromedia Dreamweaver 8.0 做的网页都是正常的。
以前做网页时也有过那种情况，另一种怀疑是没有[建立站点]，或是目录中有中文字符（这一般不会有太大影响）的原因。
不过虽然在本地无法正常浏览，但是上传到服务器上，打开网页后是正常的。本回答被提问者采纳 参考技术D 1、图片格式后缀被改过了
2、可能网页flash插件有问题
3、浏览器问题

如何使用 google colab 在 jupyter notebook 中显示 GIF？

【中文标题】如何使用 google colab 在 jupyter notebook 中显示 GIF？

【英文标题】：How to display a GIF in jupyter notebook using google colab?

【发布时间】：2020-07-21 10:12:47

【问题描述】：

我正在使用 google colab 并想嵌入一个 gif。有谁知道如何做到这一点？我正在使用下面的代码，它没有为笔记本中的 gif 设置动画。我希望笔记本是交互式的，这样人们就可以看到代码动画的内容，而无需运行它。

我发现了许多在 Google colab 中不起作用的方法。下面是代码和感兴趣的 GIF。

import matplotlib.pyplot as plt
import matplotlib.image as mpimg

img = mpimg.imread("/content/animationBrownianMotion2d.gif")
plt.imshow(img)

我尝试了提供的一些解决方案。

import IPython
from IPython.display import Image
Image(filename='/content/animationBrownianMotion2d.gif')

类似

import IPython
from IPython.display import Image
Image(filename='/content/animationBrownianMotion2d.gif',embed=True)

但得到了错误，

---------------------------------------------------------------------------
ValueError                                Traceback (most recent call last)
<ipython-input-27-56bf6cd2b134> in <module>()
      1 import IPython
      2 from IPython.display import Image
----> 3 Image(filename='/content/animationBrownianMotion2d.gif',embed=True)
      4 

/usr/local/lib/python3.6/dist-packages/IPython/core/display.py in __init__(self, data, url, filename, format, embed, width, height, retina, unconfined, metadata)
   1013 
   1014         if self.embed and self.format not in self._ACCEPTABLE_EMBEDDINGS:
-> 1015             raise ValueError("Cannot embed the '%s' image format" % (self.format))
   1016         self.width = width
   1017         self.height = height

ValueError: Cannot embed the 'gif' image format

两次。

【参考方案1】：

对于外部 gif，您可以使用 Jupyter 的显示作为 @knoop 的答案。

from IPython.display import Image
Image(url='https://upload.wikimedia.org/wikipedia/commons/e/e3/Animhorse.gif')

但是对于本地文件，需要读取字节并显示出来。

!wget https://upload.wikimedia.org/wikipedia/commons/e/e3/Animhorse.gif
Image(open('Animhorse.gif','rb').read())

【讨论】：

您可以使用 'filename' 作为关键字参数而不是 'url' 并且来自 IPython.display 的相同旧 Image 方法就像一个魅力:)

我试过了，但没有。 ValueError: Cannot embed the 'gif' image format

事实证明，你是对的。我认为我的代码有效，因为我添加了代码，但忘记执行它，并看到了之前执行的渲染图像。感谢您的提醒:)

【参考方案2】：

我不知道为什么上述方法对我不起作用。

如何将 gif 文件从 google drive 插入到 google colab

第 1 步：将 gif 保存到您的 Google 云端硬盘中

第 2 步：让 google drive 在 google drive 中打开您的文件 （此步骤与原始问题没有直接关系。）

如何将数据从 google drive 导入到 google colab。 Link

在您的 Google 云端硬盘（“我的云端硬盘”）中，在您选择的位置创建一个名为 data 的文件夹。这是您上传数据的地方。

在 Colab 笔记本中，键入以下内容：

from google.colab import drive         # tell colab to look at google drive
drive.mount('/content/drive')

这些命令将带您进入 Google 身份验证步骤。您应该会看到一个屏幕，其中包含 Google 虚拟云端硬盘想要访问您的 Google 帐户。

在您允许后，复制给定的验证码并粘贴到 Colab 的框中。

在笔记本中，点击笔记本左上角的木炭>，然后点击文件。

找到您之前创建的数据文件夹并找到您的数据。右键单击您的数据并选择复制路径。将此复制的路径存储到变量中，您就可以开始了。

数据集现在存储在 Pandas 数据帧中

第 3 步：

from IPython.core.interactiveshell import InteractiveShell
InteractiveShell.ast_node_interactivity = "all"
from IPython import display

第 4 步：

gifPath = Path("/content/drive/My Drive/xxxx/xxx.gif") # please paste the whole path from Step 2-6
# Display GIF in Jupyter, CoLab, IPython
with open(gifPath,'rb') as f:
    display.Image(data=f.read(), format='png')