在django的数据模型中，使用ImageField存储了图片，如何使用vue3在前端获取该图片并显示？

在 Django 的数据模型中，使用 ImageField 存储了图片，可以通过 Django 的视图接口将图片数据传递到前端 Vue3 中，然后使用 Vue3 的数据绑定将图片显示在页面上。

以下是一个简单的实现步骤：

1. 在 Django 的视图函数中，获取 ImageField 中存储的图片，并将其转换为 base64 编码的数据。

from django.http import JsonResponse
from django.core.files.base import ContentFile
from django.core.files.storage import default_storage

def get_image(request, image_id):
    image = MyImageModel.objects.get(id=image_id)
    with default_storage.open(image.image.path, 'rb') as f:
        image_data = f.read()
    base64_data = base64.b64encode(image_data).decode('utf-8')
    return JsonResponse({'image_data': base64_data})

2. 在 Vue3 中使用 axios 发送 GET 请求，获取 Django 视图接口中传递的图片数据。

axios.get('/api/get/image/' + imageId + '/')
  .then(response => {
    // 获取图片数据，并将其显示在页面上
    const imageData = response.data.image_data
    this.imageSrc = 'data:image/png;base64,' + imageData
  })
  .catch(error => {
    console.log(error)
  })

3. 在 Vue3 中使用数据绑定将获取到的图片数据显示在页面上。

<template>
  <div>
    <img :src="imageSrc" alt="image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: ''
    }
  }
}
</script>

需要注意的是，上述代码中使用了 base64 编码将图片数据传递到前端 Vue3 中，这会增加传输的数据量和页面加载时间，建议对图片进行压缩和优化等操作，以减小传输的数据量和提高页面加载速度。