如何将从URL获取的二进制图像内容在Django模板中正常显示

你需要将图片二进制内容转换为Base64编码的Data URI格式，才能直接放入img标签的src属性中使用，具体实现如下：

1. 修改视图函数 #

首先导入base64模块，对r.content进行编码处理，拼接为符合规范的Data URI字符串再传递给模板：

import requests
import base64

def home(request):
    r = requests.get("https://via.placeholder.com/150")

    # 此处保留你处理响应头的业务逻辑
    ...

    # 对图片二进制内容做Base64编码
    image_b64 = base64.b64encode(r.content).decode('utf-8')
    # 从响应头自动获取图片MIME类型，拼接Data URI前缀，兼容性更好
    content_type = r.headers.get('Content-Type', 'image/png')
    image_data_uri = f'data:{content_type};base64,{image_b64}'

    return render(request, 'index.html', {'image': image_data_uri})

2. 模板代码无需修改 #

你原来的模板写法可以直接正常使用：

<img src="{{ image }}">

原理解释 #

img标签的src属性只能接受资源链接或者符合规范的Data URI格式，不能直接识别原始二进制内容。Data URI的标准格式为data:[<mediatype>][;base64],<编码后内容>，浏览器可以直接解析该格式并渲染图片。
该方案仅向图片地址发起一次请求，同时可以拿到响应头处理业务逻辑，完全符合你避免额外请求的需求。

内容的提问来源于stack exchange，提问作者darkhorse