Django用户编辑表单中存储为BinaryField的base64头像无法加载问题

你只需要在视图层预处理存储的base64数据，再传到模板通过img标签的data URI方式展示即可，具体实现如下：

步骤1：修改编辑视图，预处理头像数据 #

在加载编辑表单的视图中，取出用户模型存储的base64头像数据，拼接为浏览器可识别的data URI格式，再传入模板上下文：

def edit_user(request, user_id):
    user = User.objects.get(id=user_id)
    avatar_data = None
    if user.photo:
        # 将二进制base64数据转为字符串，移除编码自带的换行符
        base64_str = user.photo.decode('utf-8').replace('\n', '')
        # 可根据实际存储的图片格式修改MIME类型，如image/png
        avatar_data = f'data:image/jpeg;base64,{base64_str}'
    # 实例化表单同时将头像数据传到模板
    return render(request, 'edit_user.html', {
        'form': UserForm(instance=user),
        'avatar_data': avatar_data
    })

步骤2：修改表单模板，添加头像展示区域 #

在原表单的上传控件上方，新增已上传头像的展示区块：

<!-- 已有头像展示 -->
{% if avatar_data %}
<div class="avatar-preview">
    <span>当前头像：</span>
    <img src="{{ avatar_data }}" alt="用户头像" style="width: 150px; height: 150px; object-fit: cover;">
</div>
{% endif %}

<!-- 原有头像上传控件 -->
<div class="form-item">
    {{ form.image.label_tag }}
    {{ form.image }}
    {% for error in form.image.errors %}
    <p class="error-tip">{{ error }}</p>
    {% endfor %}
</div>

可选优化建议 #

• 保存时将base64.encodestring替换为base64.b64encode，前者会自动插入换行符，后者输出的base64字符串无多余字符，后续处理更简洁：

  user.photo = base64.b64encode(form.cleaned_data['image'].file.read())
  

• 如果需要支持多种图片格式，可在User模型中新增photo_mime CharField字段，上传时同步存储图片的MIME类型，拼接data URI时直接调用该字段即可，无需写死格式适配性更强。

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