Question

除了我试图在聊天室中显示发送聊天消息的用户的用户个人资料图像外，其他所有程序都工作正常。这是我的图像图案打印的“ profilepics / images_g9LwcHF.jpg”。注意我正在使用django框架

<script>

  chatSocket.onmessage=function(e){
    var  tag_img=document.createElement('img');
    var get_user=document.querySelector('#user').value
    var tagname=document.createElement('li');
    var data =JSON.parse(e.data);   

    document.querySelector('.img_tag').src=data.message.sender_img

</script>

Dom

<img class ="img_tag">

这是我的消费者。py

        messaage_json={
          'user':me.username,
          'message':message_object.message,
          'sender':message_object.sender.username,
          'sender_img':str(message_object.sender.profilepicture),
          'created':str(message_object.created)
        }

        #coverting data to string 
        myResponse={
          "message":messaage_json,

        }
        #broad cast the message event to be send 
        # in the layaer
        await self.channel_layer.group_send(
            self.room_group_name,{
                # call the chat_message method
                "type":"chat_message",
                #covert string data to json objects
                "text":json.dumps(myResponse),

            }
        )

它在媒体文件中打印出用户个人资料图像路径，但无法使用javascript显示图像。注意我正在使用django。

Answer 1

我看不到您实际上将新创建的图像DOM节点注入DOM中，例如您需要执行此操作才能显示图像：

chatSocket.onmessage=function(e){

var data =JSON.parse(e.data);

var tag_img=document.createElement('img');
tag_img.src = data.message.sender_img;

document.querySelector('.img_tag').appendChild(tag_img);

Answer 2

是的，我解决了这个问题。由于所有上传的图像都存储在django媒体文件中，因此要显示图像路径，我将使用以下波纹管

tag_img.src = '/'+'media'+'/'+ data.message.sender_img;

在Django模板中显示聊天发件人的用户个人资料图像

2 个答案: