使用jinja模板从模型加载图像

时间:2019-05-20 14:54:48

标签: python django jinja2

我有一个简单的博客,并且在我的文章模型中有一个图像,希望用作网站上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'),
] 

该网站上的所有内容运行正常,只是没有加载任何图像。取而代之的是,我得到了损坏的图像标签以及放置的替代文本。

0 个答案:

没有答案