python - 使用 jinja 模板从模型中加载图像

Question

我有一个简单的博客，我的文章模型中有一个图像，我想在我的网站上用作 div 中的背景图像。图像不会以现在编写代码的方式加载。

我尝试在我的 settings.py 中更改媒体和静态设置，但我不确定这是否是问题所在。

这是我的文章模型。

class Article(models.Model):
    title = models.CharField(max_length=100)
    overview = models.TextField()
    timestamp = models.DateTimeField(auto_now_add=True)
    author = models.ForeignKey(Author, on_delete=models.CASCADE)
    thumbnail = models.ImageField()
    categories = models.ManyToManyField(Category)
    featured = models.BooleanField()
    content = HTMLField(null=True)
    is_draft = models.BooleanField(default=True)

    def __str__(self):
        return self.title

    def get_absolute_url(self):
        return reverse('article-detail', kwargs={
            'id': self.id
        })

这是 index.html 页面，这是我现在如何尝试使用 jinja 标签调用图像的示例：

{% extends "base.html" %}
{% load static %}
{% block content %}


        <section data-overlay>
          <div class="container">
            <div class="row mb-4">

              <div class="col-md-8 col-lg-9">
                {% for post in queryset %}
                <div class="pr-lg-4">
                  <a href="{{ post.get_absolute_url }}" class="bg-primary-3-alt rounded p-4 d-flex align-items-center justify-content-center min-vh-20">
                    <img src="{{ article.thumbnail.url }}" alt="Avatar" class="avatar mr-2">
                    <span class="text-small text-primary-3">{{ post.title }}</span>
                  </a>
                </div>
                {% endfor %}
                <br>
                <div class="row justify-content-center pr-lg-4">
                  <div class="col-auto">
                    <nav>
                      <ul class="pagination mb-0">
                        {% if queryset.has_previous %}
                        <li class="page-item"><a href="?{{ page_request_var }}={{ queryset.previous_page_number }}" class="page-link">Previous</a></li>
                        {% endif %}
                        <li class="page-item"><a href="?{{ page_request_var }}={{ queryset.number }}" class="page-link active"> {{ queryset.number }}</a></li>
                        {% if queryset.has_next %}
                        <li class="page-item"><a href="?{{ page_request_var }}={{ queryset.next_page_number }}" class="page-link">Next</a></li>
                        {% endif %}
                      </ul>
                    </nav>
                  </div>
                </div>
              </div>
              <div class="col-md-4 col-lg-3 d-none d-md-block">
                <div class="mb-4">
                  <h5>Newsletter</h5>
                  <form action="/forms/mailchimp.php" data-form-email novalidate>
                    <div class="form-row">
                      <div class="col-12">
                        <input type="email" class="form-control mb-2" placeholder="Email Address" name="email" required>
                      </div>
                      <div class="col-12">
                        <div class="d-none alert alert-success" role="alert" data-success-message>
                          Thanks, a member of our team will be in touch shortly.
                        </div>
                        <div class="d-none alert alert-danger" role="alert" data-error-message>
                          Please fill all fields correctly.
                        </div>
                        <div data-recaptcha data-sitekey="INSERT_YOUR_RECAPTCHA_V2_SITEKEY_HERE" data-size="invisible" data-badge="bottomleft">
                        </div>
                        <button type="submit" class="btn btn-primary btn-loading btn-block" data-loading-text="Sending">
                          <svg class="icon" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <title>Icon For Loading</title>
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                              <g>
                                <polygon points="0 0 24 0 24 24 0 24" opacity="0"></polygon>
                              </g>
                              <path d="M12,4 L12,6 C8.6862915,6 6,8.6862915 6,12 C6,15.3137085 8.6862915,18 12,18 C15.3137085,18 18,15.3137085 18,12 C18,10.9603196 17.7360885,9.96126435 17.2402578,9.07513926 L18.9856052,8.09853149 C19.6473536,9.28117708 20,10.6161442 20,12 C20,16.418278 16.418278,20 12,20 C7.581722,20 4,16.418278 4,12 C4,7.581722 7.581722,4 12,4 Z"
                              fill="#000000" fill-rule="nonzero" transform="translate(12.000000, 12.000000) scale(-1, 1) translate(-12.000000, -12.000000) "></path>
                            </g>
                          </svg>
                          <span>Subscribe</span>
                        </button>
                      </div>
                    </div>
                  </form>
                  <small class="text-muted form-text">We’ll never share your details. See our <a href="#">Privacy Policy</a>
                  </small>

                </div>
                <div class="mb-4">
                  <h5>Popular</h5>
                  <ul class="list-unstyled list-articles">
                    <li class="row row-tight">
                      <a href="#" class="col-3">
                        <img src="img/article-1.jpg" alt="Image" class="rounded">
                      </a>
                      <div class="col">
                        <a href="#">
                          <h6 class="mb-1">How to build collateral</h6>
                        </a>
                        <div class="d-flex text-small">
                          <a href="#">Business</a>
                          <span class="text-muted ml-1">29th November</span>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </section>

{% endblock %}

这是我的 index.html 的views.py

def index(request):
    article_list = Article.objects.all()
    paginator = Paginator(article_list, 4)
    page_request_var = 'page'
    page = request.GET.get(page_request_var)
    try:
        paginated_queryset = paginator.page(page)
    except PageNotAnInteger:
        paginated_queryset = paginator.page(1)
    except EmptyPage:
        paginated_queryset = paginator.page(paginator.num_pages)

    context = {
        'queryset': paginated_queryset,
        'page_request_var': page_request_var,
    }
    return render(request, 'index.html', context)

这是我的 urls.py

from django.urls import path, include
from django.contrib import admin
from django.conf import settings
from django.conf.urls.static import static
from django.views.generic import TemplateView
from articles.models import Author, Article, Category
from articles.views import home, article, index

urlpatterns = [
    path('admin/', admin.site.urls),
    path('tinymce/', include('tinymce.urls')),
    path('', home),
    path('index', index, name='article-list'),
    path('article/<id>/', article, name='article-detail'),
    path('about',TemplateView.as_view(template_name="about.html"), name = 'about'),
    path('contact',TemplateView.as_view(template_name="contact.html"), name = 'contact'),
    path('article', TemplateView.as_view(template_name="article.html"), name='article'),
] 

网站上的一切都运行良好，我只是没有加载任何图像。相反，我得到了损坏的图像标签和我放置的任何替代文本。

标签： pythondjangojinja2