如何将base64和return中的多张图片转换成json格式显示在html中？

Question

我想将多张图片转换为 base64 和 return json 格式。同时，我想在我的 html 模板中显示。当我运行我的代码运行完美时，但结果只显示某些结果。下面附上我的结果。我也无法在 html 模板中显示我的 json 数据。在这里附上我的代码。

app.py

@app.route("/api/images")
def get_images():
    directory = os.listdir('C:/Users/HP/Miniconda3/envs/count_vechicle/coding/images')
    os.chdir('C:/Users/HP/Miniconda3/envs/count_vechicle/coding/images')
    data={}
    for file in directory:
        base = os.path.basename(file)
        data["label"] = base
        open_file = open(file,'rb')
        image_read = open_file.read()
        image_64_encode = base64.encodebytes(image_read)
        data["data"] = image_64_encode.decode('ascii') 
        final_data = json.dumps(data,sort_keys = True, indent = 4, separators = (',', ': '))
        print(final_data)
        #return final_data
        return render_template("images.html", final_data=final_data)

Images.html

<!DOCTYPE html>
<html>
<head>
</head>
 <body>
   <h1 class="logo">Results</h1>

   <ul>
    {% for data in final_data %}
    <li>{{final_data}}</li>
    <img src={{data.da}}>
    {% endfor %}
   </ul>

 </body>
</html>

Answer 1

您的代码中存在多个问题。首先，您应该收集所有文件，然后 return 模板，但现在您的代码 returns 在阅读第一张图片后：

app.py

@app.route("/api/images")
def get_images():
    directory = os.listdir('C:/Users/HP/Miniconda3/envs/count_vechicle/coding/images')
    os.chdir('C:/Users/HP/Miniconda3/envs/count_vechicle/coding/images')

    flist = list()
    for file in directory:
        data = dict()
        base = os.path.basename(file)
        data["label"] = base
        open_file = open(file,'rb')
        image_read = open_file.read()
        image_64_encode = base64.encodebytes(image_read)
        data["data"] = image_64_encode.decode('ascii')
        flist.append(data)     

    final_data = json.dumps({'files':flist}, sort_keys=True, indent=4, separators=(',', ': '))
    return render_template("images.html", final_data=final_data)

当您在 html 模板的图像标记源中嵌入 base64 图像时，您需要说明它是 base64 图像。因此，对于 Jpeg 图片，您可以使用：

Images.html

<!DOCTYPE html>
<html>
<head>
</head>
 <body>
   <h1 class="logo">Results</h1>

   <ul>
    {% for data in final_data.files %}
    <li>{{data.label}}</li>
    <li><img alt="embedded" src="data:image/jpg;base64,{{data.data}}"/></li>
    {% endfor %}
   </ul>

 </body>
</html>

Answer 2

but the result only display certain result only

将return放入for循环中，会在第一次迭代后立即退出for循环。您需要制作一个列表，然后在每次迭代时附加新数据。

如何将base64和return中的多张图片转换成json格式显示在html中？

How to convert multiple image in base64 and return in json format and display in html?

python

base64

json

flask

python-3.x