У меня есть простой блог и изображение в моей модели статей, которое я хотел бы использовать в качестве фонового изображения в 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 %}
Вот мои views.py для моего index.html
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'),
]
Все на сайте работает нормально, я просто не загружаю изображения. Вместо этого я получаю тег сломанного изображения и любой другой текст, который я добавляю.