如何在base64中转换多个图像并以json格式返回并以html格式显示？答案

【问题标题】：How to convert multiple image in base64 and return in json format and display in html?如何在base64中转换多个图像并以json格式返回并以html格式显示？
【发布时间】：2020-02-12 00:36:52
【问题描述】：

我想将多张图片转换成base64并以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>

【问题讨论】：

标签： python json python-3.x flask base64

【解决方案1】：

您的代码中存在多个问题。首先，您应该收集所有文件，然后返回模板，但是现在您的代码在读取第一张图像后返回：

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 模板中的 image 标签源中嵌入 base64image 时，您需要提及它是 base64image。例如，对于 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>

【讨论】：

我无法测试这是否有效，因为我没有整个系统，但我希望这能给你一些提示。
我已经输入了我的代码，但显示错误类似于“赋值前引用的局部变量 'final_data'”
你需要删除print(final_data) 行，也许@aminrd 忘记了。
@adam919191 这是因为print(final_data) 行。我删除了那条线
@aminrd 已经删除并运行代码，当我运行 localhost:5000/api/images 结果显示什么，只显示结果结果标题

【解决方案2】：

但结果只显示某些结果

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

【讨论】：

嗨@loginmind，我尝试打印final_data.files[0].label，但它的显示结果类似于这个'str'对象没有属性'files'。目前，我仍然无法在 html 中显示我的结果
嗨@adam919191，我发现在@aminrd 解决方案中，json.dump 将返回 json 格式，表示它是字符串类型。这就是为什么你得到错误'str' object has no attribute 'files'。
感谢您的回复。我还在做这个..但仍然没有得到结果
我仍然无法在html中打印结果..它只是显示标题..但不显示数据
为了处理这样的问题，我建议你使用模拟数据。您需要将问题分为两个任务：渲染 html 和构建数据。首先使用模拟数据测试每个任务，然后将它们组合起来。