利用axios,从django后端中读取图片
时间: 2023-12-20 13:09:50 浏览: 164
你可以使用axios发送HTTP请求来从Django后端中读取图片。具体的做法如下:
1. 在Django后端中创建一个视图函数,该函数负责返回图片的二进制数据。
2. 在前端代码中使用axios发送HTTP请求,调用该视图函数,获取图片的二进制数据。
3. 将二进制数据转换成base64编码的字符串,然后将其赋值给img标签的src属性,就可以在前端页面中显示图片了。
下面是一个示例代码,供你参考:
Django后端代码:
```python
from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def get_image(request):
with open('/path/to/image.jpg', 'rb') as f:
image_data = f.read()
return HttpResponse(image_data, content_type='image/jpeg')
```
前端代码:
```javascript
axios.get('/get_image/')
.then(response => {
const image = new Image();
image.src = `data:image/jpeg;base64,${btoa(String.fromCharCode(...new Uint8Array(response.data)))}`;
document.body.appendChild(image);
})
.catch(error => {
console.error(error);
});
```
注意,上面的代码中使用了btoa函数将二进制数据转换成base64编码的字符串。这个函数的兼容性有些问题,如果在低版本的浏览器中使用可能会出现问题。如果需要支持低版本浏览器,可以使用第三方库如base64-js来进行转换。
阅读全文