如何将Django从数据库获取的ImageFieldFile传给Vue前端并显示

后端修改：返回完整可访问的图片URL #

你当前仅返回了图片文件名，前端需要完整的绝对访问URL才能加载图片。修改视图代码，利用Django的request.build_absolute_uri()方法，将图片的相对路径转为可直接访问的完整URL：

def getContent(request):
    mtitle = request.GET.get('title')
    row_obj = models.content.objects.filter(title=mtitle).first()
    res = {}
    if row_obj and row_obj.img:
        # 生成完整的图片访问URL
        res["pic"] = request.build_absolute_uri(row_obj.img.url)
    else:
        res["pic"] = ""  # 处理无图片的异常情况
    return JsonResponse(res, json_dumps_params={"ensure_ascii": False})

前提：确保媒体文件配置正确 #

要让图片能被外部正常访问，需先完成Django项目的媒体文件配置：

• 在settings.py中设置媒体文件的存储路径和访问前缀：

  import os
  BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
  
  MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
  MEDIA_URL = '/media/'
  

• 在项目根目录的urls.py中添加媒体文件的访问路由：

  from django.conf import settings
  from django.conf.urls.static import static
  
  urlpatterns = [
      # 你的其他业务路由
  ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  

前端Vue处理：直接使用URL加载图片 #

前端拿到后端返回的pic字段后，直接在<img>标签中绑定该URL即可显示图片：

<template>
  <div>
    <img :src="picUrl" alt="内容图片" v-if="picUrl" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      picUrl: ''
    }
  },
  mounted() {
    // 调用后端接口获取图片URL
    fetch(`/getContent?title=目标标题`)
      .then(res => res.json())
      .then(data => {
        this.picUrl = data.pic
      })
  }
}
</script>

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