如何将ImageField添加到HTML并使其可见

Question

我正在尝试创建一个适当的ImageField，以便用户可以从管理面板更改图像。但即使知道我在媒体文件夹中看到了图像，我仍然无法在头版看到它

setting.py

STATIC_URL = '/static/'

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

model.py

class HomePage(models.Model):
    name = models.CharField(max_length=10, blank=True)
    main_visual = models.ImageField(default="default.jpg", upload_to="homepage_pics")
    top_content_header = models.CharField(max_length=100, blank=True)
    top_content = models.TextField(max_length=100, blank=True)
    featured_groups_header = models.CharField(max_length=100, blank=True)
    featured_groups = models.TextField(max_length=100, blank=True)
    seven_groups_header = models.CharField(max_length=100, blank=True)
    seven_groups = models.TextField(max_length=100, blank=True)
    about_us_header = models.CharField(max_length=500, blank=True)
    about_us = models.TextField(max_length=500, blank=True)
    about_us_image = models.ImageField(default="about_us.png", upload_to="about_us_pics")

    def __str__(self):
        return f'{self.name}'

views.py

def home(request):
    if request.method == 'POST':
        form = ContactForm(request.POST or None)
        if form.is_valid():
            sender_name = form.cleaned_data['name']
            sender_email = form.cleaned_data['email']
            message = "{0} has sent you a new message:\n\n{1}".format(sender_name, form.cleaned_data['message'])
            send_mail('New Enquiry', message, sender_email, ['warp.dev.group@gmail.com'])
            return HttpResponse('Thanks for contacting us!')
    else:
        form = ContactForm()
    context = {
        "homepage": HomePage.objects.filter(name="homepage").first(),
        "footer": Footer.objects.filter(name="footer").first(),
        'form': form
    }

    return render(request, 'member/home.html', context)

home.html

<section class="site-section" id="about-section">
      <div class="container">
        <div class="row">
          <div class="col-md-5 mr-auto">
            <div class="text-left heading-wrap mb-5">
              <h2 class="mt-0 mb-5">{{ homepage.about_us_header }}</h2>
              <p>{{ homepage.about_us }}</p>

            </div>
          </div>
          <div class="col-md-6 position-relative align-self-center">
            <img src = {{ homepage.about_us_image }} alt="Image" class="img-overlap-1">
          </div>
        </div>
      </div>
    </section>

about_us图像保存到about_us图片文件夹中

谢谢大家

Answer 1

尝试像这样添加.url：

<img src="{{ homepage.about_us_image.url }}" alt="Image" class="img-overlap-1">

别忘了引号"{{..}}"

Answer 2

如果您正在使用开发服务器./manage.py runserver运行此程序，则需要添加URL模式

签出https://overiq.com/django-1-10/handling-media-files-in-django/

还可以发布呈现的html