Как отобразить профиль пользователя (реальное изображение) вместо имени файла в форме Django, которая в основном обновляет учетную запись пользователя

Я изучаю курс Django на youtube, и мне нужно внести небольшие изменения в мою Django форму.

Форма выглядит следующим образом:

enter image description here

html поля формы, которое я хочу изменить:

<form action="" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    {% for field in form %}
    <div class="form-input">
        <label for="id_{{field.label}}">{{field.label}}</label>
        {{field}}
    </div>
    {% endfor %}
    <div id="lrf-options">
        <div id="lrf-btn">
            <input class="btn" type="submit" value="Update">
        </div>
    </div>
</form>

Поле аватара, создаваемое этим шаблоном:

<div class="form-input">
    <label for="id_Avatar">Avatar</label>
    Currently:
    <a href="/images/1044-3840x2160.jpg">1044-3840x2160.jpg</a>
    <br>
    Change:
    <input type="file" name="avatar" accept="image/*" id="id_avatar">
</div>

Что я на самом деле спрашиваю: Итак, в Avatar Currently: 1044-3840x2160.jpg, я хочу, чтобы фактическое изображение отображалось здесь вместо <filename>.

Я думаю, может быть, мне нужно изменить мой forms.py, чтобы он генерировал тег <img> вместо тега <a>, но я не знаю, как это сделать.

models.py

class UserModel(AbstractUser):
    name = models.CharField(max_length = 90)
    email = models.EmailField(unique = True)
    about = models.TextField(blank = True, null = True)
    avatar = models.ImageField(null=True, default="avatar.svg")

    USERNAME_FIELD = 'email'

а forms.py это:

class UserForm(forms.ModelForm):
    class Meta:
        model = UserModel
        fields = ['avatar', 'name', 'username', 'email', 'about']

а в views.py функция обновления выглядит так:

def editUserProfile(request):
    user = request.user
    form = UserForm(instance=user)
    if request.method == 'POST':
        form = UserForm(request.POST, request.FILES, instance = user)
        if form.is_valid():
            form.save()
            return redirect('chat:userProfileView', uname = user.username)

    context = {
        'form' : form
    }
    return render(request, 'chat/edit-user.html', context)

Вы можете добавить request.user.avatar.url вместо текущего url.Hide input и использовать jquery, чтобы дать клик на input:

<div class="form-input">
    <label for="id_Avatar">Avatar</label>
    Currently:
    <img id="current-avatar" src="{{request.user.avatar.url}}"/>
    <br>
    <a id="change-avatar">Change</a>
    <input id="avatar-input" style="display:none;" type="file" name="avatar" accept="image/*" id="id_avatar">
</div>


<script>
$("#change-avatar").click(function(){
   $("#avatar-input").click();
});
</script>

Если у вас нет jQuery, добавьте это в ваш основной HTML:

<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
Вернуться на верх