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

【问题标题】：How can i load images in django template with asynchronous system?如何使用异步系统在 django 模板中加载图像？
【发布时间】：2021-06-27 05:15:51
【问题描述】：

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

这是我的 settings.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已经在获取图像但它不是显示图像而是显示其他数据。

【问题讨论】：

标签： javascript html django asynchronous django-channels

【解决方案1】：

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

【讨论】：