Как отобразить изображение в качестве текущего значения поля ImageField в приложении DJango

У меня есть такая форма в шаблоне Django:

 <form action="{% url 'MCARS:Service-Record' %}" method="POST">
                        {% csrf_token %}
                        <div class="box-body">
                        {% for field in form %}
                            {% if not forloop.counter|divisibleby:2 %}
                                <div class="row">
                            {% endif %}
                                <div class="col-md-6">
                                    <div class="mb-3 form-element form-control">
                                        {{ field.label_tag }}
                                        {% if field.errors %}
                                            {% for error in field.errors %}
                                                {{ error }}
                                            {% endfor %}
                                        {% endif %}
                                        {% if field.ClearableFileInput %}
                                            <div>
                                                <p>Current Image:</p>
                                                <img src="{% static form.instance.avatar.url %}" alt="Uploaded Image" style="max-width: 300px; height: auto;">
                                            </div>
                                        {% endif %}
                                        {{ field|add_class:'form-control' }}
                                    </div>
                                </div>
                            {% if forloop.counter|divisibleby:2 %}
                                </div>
                            {% endif %}
                        {% endfor %}
                        </div>
                        <div class="text-end">
                            <button type="submit" class="btn btn-primary mt-2"><i class="mdi mdi-content-save"></i> Save</button>
                        </div>
                    </form>

используя эту модель, 

lass Profile(models.Model):
    # Managed fields
    user     = models.OneToOneField(User, related_name="profile", on_delete=models.CASCADE)
    memberId = models.CharField(unique=True, max_length=15, null=False, blank=False, default=GenerateFA)
    bio = models.TextField(null=True, blank=True)
    avatar   = models.ImageField(upload_to="static/MCARS/img/members", null=True, blank=True)
    birthday = models.DateField(null=True, blank=True)
    gender   = models.CharField(max_length=10, choices=constants.GENDER_CHOICES, null=True, blank=True)

и эта форма

class UserProfileForm(ModelForm):
    class Meta:
        model = Profile
        exclude = ('user','memberId','invited', 'registered')

Там есть одно поле, которое называется аватар. Я добираюсь до этой части шаблона:

                                        {% if field.ClearableFileInput %}
                                            <div>
                                                <p>Current Image:</p>
                                                <img src="{% static form.instance.avatar.url %}" alt="Uploaded Image" style="max-width: 300px; height: auto;">
                                            </div>
                                        {% endif %}

и я не могу заставить изображение отображаться. Что я упускаю?

Спасибо!

Прежде всего, {% static %} предназначен для статических файлов (таких как CSS / JS), а не для загрузки мультимедийных файлов, таких как изображения, загруженные пользователями.

Во-вторых,

field.ClearableFileInput таким образом, вычисление выполняется неправильно. Вместо этого проверьте имя поля (field.name) или, в частности, поле avatar.

обновите блок в вашем шаблоне:

{% if field.name == "avatar" and form.instance.avatar %}
    <div>
        <p>Current Image:</p>
        <img src="{{ form.instance.avatar.url }}" alt="Uploaded Image" style="max-width: 300px; height: auto;">
    </div>
{% endif %}

убедитесь, что в настройках установлены следующие параметры.py и urls.py файл.

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # ... your other urls ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

# Don't store media inside static/  change it to-

avatar = models.ImageField(upload_to="MCARS/img/members", ...)

Я думаю, что в вашем field.ClearableFileInput

попробуйте сделать это:

{% if field.name == 'avatar' and form.instance.avatar %}
 <div>
        <p>Current Image:</p>
        <img src="{% static form.instance.avatar.url %}" alt="Uploaded Image" style="max-width: 300px; height: auto;">
    </div>
{% endif %}

И если вы динамически загружаете изображения от пользователя, то нет необходимости в static в 

<img src="{% static form.instance.avatar.url %}" alt="Uploaded Image" style="max-width: 300px; height: auto;">

вместо этого используйте media route для сохранения изображений, загруженных пользователем
проверьте, как это использовать:

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'
Вернуться на верх