javascript - Python FastAPI : Returned gif image is not animating

标签 javascript python html fastapi

下面是我的 Python 和 Html 代码:-
Python:

@app.get('/', status_code=200)
async def upload_file(file: UploadFile = File(...)):
     error_img = Image.open('templates/crying.gif')
     byte_io = BytesIO()
     error_img.save(byte_io, 'png')
     byte_io.seek(0)
     return StreamingResponse(byte_io, media_type='image/gif')
HTML:
<img src="" id="img-maze" alt="this is photo" style="display: none;" />

function goBuster(file) {

    fetch('/', {
        method: 'GET',
        body: data
    })
        .then(response => response.blob())
        .then(image => {
            var outside = URL.createObjectURL(image);
            var mazeimg = document.getElementById("img-maze");
            mazeimg.onload = () => {
                URL.revokeObjectURL(mazeimg.src);
            }
            mazeimg.setAttribute('src', outside);
            mazeimg.setAttribute('style', 'display:inline-block');

        })
}
图像没有动画,我检查了生成的 html 并发现:
<img src="blob:http://127.0.0.1:8000/ee2bda53-92ac-466f-afa5-e6e34fa3d341" id="img-maze" alt="this is  photo" style="display:inline-block">
所以 img src 正在使用 blob,我想这就是 gif 没有动画的原因,但我不知道如何修复它。
更新 1
现在我已将代码更新为:
      with open('templates/crying.gif', 'rb') as f:
        img_raw = f.read()
        byte_io = BytesIO()
        byte_io.write(img_raw)
        byte_io.seek(0)
        return StreamingResponse(byte_io, media_type='image/gif')
生成的 HTML 看起来相同:
<img src="blob:http://127.0.0.1:8000/c3ad0683-3971-4444-bf20-2c9cd5eedc3d" id="img-maze" alt="this is maze photo" style="display:inline-block">
但情况变得更糟,图像甚至没有出现。

最佳答案

(代表问题作者发布解决方案,以便将其发布在答案空间中)。
我通过以下方式解决了问题:

  • 使用@VadSim 提供的代码,
  • wb 改为 rb

  • 注意:如果您运行该程序,然后将 wb 更改为 rb ,则该代码会将原始 gif 图像破坏为 0 字节图像。这就是它一开始不起作用的原因。
    现在,我在 html 中使用了 gif :)

    关于javascript - Python FastAPI : Returned gif image is not animating,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67571477/

    相关文章:

    css - 未配对的 <form> 标签

    javascript - 如何在 JavaScript 中使用格式示例 : 2018-01-22T11:48:39. 396000Z 获取当前时间?

    javascript - sheet.cssRules 在内页上抛出错误但在主页上工作正常

    javascript - 如何使用来自网络套接字的网络音频 API 流式传输音频 block ?

    Python RobotFramework 查找元素

    javascript - 使用虚拟键盘时物理键盘不会禁用

    javascript - 使用 jQuery 设置 JSON 样式

    python - 修复代码以摆脱 ValueError : cannot set using a multi-index selection indexer with a different length

    python - 运行 fuzzywuzzy/fuzz.py 时出错

    php - 上传图片错误不隐藏即使我上传图片