在django的数据模型中,使用ImageField存储了图片,如何使用vue3在前端获取该图片并显示?
时间: 2024-02-09 15:13:29 浏览: 109
在 Django 的数据模型中,使用 ImageField 存储了图片,可以通过 Django 的视图接口将图片数据传递到前端 Vue3 中,然后使用 Vue3 的数据绑定将图片显示在页面上。
以下是一个简单的实现步骤:
1. 在 Django 的视图函数中,获取 ImageField 中存储的图片,并将其转换为 base64 编码的数据。
```python
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 视图接口中传递的图片数据。
```javascript
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 中使用数据绑定将获取到的图片数据显示在页面上。
```html
<template>
<div>
<img :src="imageSrc" alt="image">
</div>
</template>
<script>
export default {
data() {
return {
imageSrc: ''
}
}
}
</script>
```
需要注意的是,上述代码中使用了 base64 编码将图片数据传递到前端 Vue3 中,这会增加传输的数据量和页面加载时间,建议对图片进行压缩和优化等操作,以减小传输的数据量和提高页面加载速度。
阅读全文