gpt4 book ai didi

html - 如何在 HTML 中显示 ImageGridFSProxy?

转载 作者:可可西里 更新时间:2023-11-01 10:29:46 25 4
gpt4 key购买 nike

我在 MongoDB 中存储了几张图片,现在我想在网页中显示它们。我正在为我的应用程序使用 Flask。该记录有一个名为“payload”的二进制字段

class BinaryFile(mongo.Document):
created_at = mongo.DateTimeField(default=datetime.datetime.now, required=True)
file_name = mongo.StringField(max_length=255, required=True)
payload = mongo.ImageField(required=False)

我想显示负载。有关如何执行此操作的任何线索?我试过了

<img src="{{ image.payload }}"/>

这只是给了我一个损坏的链接。然后页面的源代码显示为

<img src="&lt;ImageGridFsProxy: None&gt;"/>

如果我尝试

<img src="{{ image.payload.read() }}"/>

我明白了

UnicodeDecodeError: 'ascii' codec can't decode byte 0x89 in position 0: ordinal not in range(128)

有点难过。有任何想法吗?谢谢!

最佳答案

image.payload.read() 返回图像的原始数据,这就是我们想要的,只是我们不想将它放在 IMG 标签的 src 属性中。

我们想要的是将原始图像数据作为图像提供,并将该图像的 URL 放入 src 属性。

Here is one example how it can be done with a temporary file.这很可能是您想要的解决方案。

from tempfile import NamedTemporaryFile
from shutil import copyfileobj

tempFileObj = NamedTemporaryFile(mode='w+b',suffix='jpg')
copyfileobj(image.payload,tempFileObj)
tempFileObj.seek(0,0)

然后在 View 中提供文件

from flask import send_file

@app.route('/path')
def view_method():
response = send_file(tempFileObj, as_attachment=False, attachment_filename='myfile.jpg')
return response

也许可以直接从 ImageGridFSProxy 对象发送图像数据并跳过临时文件,但我不确定。

------------

现在您已完成代码,我将按照我的方式发布。以及我试图解释的方式。 :)

这是我的 app.py。

from flask import Flask, send_file, render_template
import mongoengine as mo

app = Flask(__name__)
c = mo.connection.connect('localhost')

@app.route('/')
def index():
images = MyDoc.objects.all()
return render_template('template.html', images=images)

# Separate view for the images
@app.route('/image/<img_name>')
def image(img_name):
image = MyDoc.objects(file_name=img_name).first()
# This is where the tempfile stuff would have been if it would
# have been needed.
if image:
return send_file(image.payload, mimetype='image')
else:
return "404" # might want to return something real here too

class MyDoc(mo.Document):
file_name = mo.StringField(max_length=255, required=True)
payload = mo.ImageField(required=True)

if __name__ == "__main__":
app.run(debug=True)

这是模板。

<html>
<body>
<div>
This is a body!
<div>
{% if images %}
{% for image in images %}
{{ image.file_name }}
<img src="/image/{{ image.file_name }}" />
I'm an image!<br><br>
{% endfor %}
{% endif %}

</div>
</div>
</body>
</html>

整个 tempfile 是不必要的,因为可以使用 send_file 直接发送有效负载。需要 mimetype 来告诉浏览器“这是一个图像”,浏览器应该只显示它​​而不是下载它。这不是我之前怀疑的 as_attachment

这样就不需要使用 tempfile 保存文件或将文件保存到静态提供的目录中。

关于html - 如何在 HTML 中显示 ImageGridFSProxy?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28260499/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com