Django отправка фотографии профиля с помощью каналов django

Я делаю приложение для чата и хочу показывать картинку профиля пользователя каждый раз, когда он отправляет что-то в чате. Вот код:

Models.py

class Chat(models.Model):
    room_name = models.CharField(max_length=200,null=True)
    message = models.CharField(max_length=200,null=True)

class Profile(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE,null=True)
    username = models.CharField(max_length=200,blank=False,null=True,unique=True)
    profpic = models.ImageField(upload_to='profpics/',blank=True,null=True)

Consumers.py

# chat/consumers.py
import json
from channels.generic.websocket import AsyncWebsocketConsumer
from .models import *
from main.models import *
class ChatConsumer(AsyncWebsocketConsumer):
    @sync_to_async
    def get_profile(self):
        return self.scope['user'].profile
    async def connect(self):
        self.room_name = self.scope['url_route']['kwargs']['room_name']
        self.room_group_name = 'chat_%s' % self.room_name
        # Join room group
        await self.channel_layer.group_add(
            self.room_group_name,
            self.channel_name
        )

        await self.accept()

    async def disconnect(self, close_code):
        # Leave room group
        await self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name
        )

    # Receive message from WebSocket
    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']
        room = text_data_json['room']
        profile = await self.get_profile()
        profile_pic = profile.profpic
        profpic = json.dumps(str(profile_pic))
        print(profpic)
        username = text_data_json['username']
        await self.save_message(message, room,username)
        # Send message to room group
        await self.channel_layer.group_send(
            self.room_group_name,
            {
                'type': 'chat_message',
                'message': message,
                'username':username,
                'profpic':profpic
            }
        )

    # Receive message from room group
    async def chat_message(self, event):
        message = event['message']
        username = event['username']
        profpic = event['profpic']
        # Send message to WebSocket
        await self.send(text_data=json.dumps({
            'message': message,
            'username':username,
            'profpic':profpic
        }))

chat.html

....
chatS.onmessage = function(e){
    const data = JSON.parse(e.data)
    if(data.message) {
        let username = data.username
        let profilepic = data.profpic
        let messages = document.getElementById('messages')
        let message = document.createElement('div')
        message.setAttribute('id','text')
        message.innerHTML = `<img style='display:inline-block;margin-left:10px;>' src="/media/${profilepic}"></img><span style='color:red;margin-left:10px;'>{{name}}</span><span style='margin-left:10px;'>${data.message}</span>`
        messages.appendChild(message)
        messages.scrollTop = messages.scrollHeight
    }
}
....

Я пытался добавить картинку в этой строке:`` message.innerHTML = `` src="/media/${profilepic}">{{name}}${data.message}```.

Когда я запускаю его, я не получаю ошибок, но изображение не отображается, и вместо этого я получаю это изображение: enter image description here.

В cmd я получаю Not Found: /media/profpics/.

Пожалуйста, ответьте.

Спасибо.

profile_pic = profile.profpic.url

<img style='display:inline-block;margin-left:10px;' src="${profpic}" />