django返回vue图片显示

目录

vue图片显示方式

通过base64字符串传回图片

vue接收图片

---

vue图片显示方式

vue显示图片分为3种方式

1. 本地文件打开
2. base64字符串
3. 后端传入文件流（暂未弄懂）

在django和vue中的交互中在前后端分离的情况下只有2和3两种方式可以使用。

通过base64字符串传回图片

把图片在django中以二进制形式打开后，使用base64库进行编码，把字符串以json格式返回或者直接返回均可。

with open(f"E:\my_road\code\python_code\Django\gradu_django\static\\{i.avatar}", 'rb') as image_file:
       image_data = base64.b64encode(image_file.read()).decode('utf-8')
       imageSrc = f"data:image/jpeg;base64,{image_data}"

vue接收图片

vue中使用axios接收django发送的图片即可，这里进行封装request方便后续多次调用

request.js:

import axios from "axios";

const request=axios.create({
    baseURL:"http://127.0.0.1:8000",
    withCredentials: true , //表示可以携带cookie

})
export default request; //向外暴露接口

vue显示图片界面

<script>
let usercontentres=await request({url:"/getusercontent/",method:"post",})
//用户数据列表
currentpageData.value=usercontentres.data
</script>
<template>
<img :src="currentpageData">
</template>