如何使用异步系统在django模板中加载图像



我试图在django中创建异步系统。为此,我使用了Channels,并试图将图像url发送到我的模板,并在模板页面上显示图像。但它没有起作用。

这是我的设置.py文件

STATIC_URL = '/static/'
import os
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'), ) 
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
MEDIA_URL = '/media/' 
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

以下是我如何从数据库发送数据。

class WSConsumer(WebsocketConsumer):
def connect(self):
self.accept()
x = Student.objects.filter(id=1)
self.send(json.dumps({
'name':x[0].name,
"img":x[0].image.url,
}))

index.html文件

{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>

<div id='img'></div>
<script>

var socket = new WebSocket('ws://localhost:8000/ws/some_url/');

socket.onmessage = function(event)
{
var data = JSON.parse(event.data);
console.log(data);
var url = data.img
var el = document.getElementById("img");
el.innerHTML=`<img src= ${url}>`;
}
</script>
</body>

所有的异步系统都能完美地工作。js已经在获取图像,但它没有显示图像,而是显示其他数据。

错误是我将媒体url路径放在了appurls.py文件中。它必须在项目urls.py文件中。

最新更新