python - Django 使用外键显示上传的多张图片

Question

例如，在我上传一张或多张图片后，ID 为 31 的 Post 在数据库中显示为：

id（例如：1,2,3）
url转为图片（例如：my-images/image.png）
foreing_id（这是 post 的 ID，即 31）

但我不知道如何在模板中显示此图像 post（当然还有其他人）

我的模特：

class Post(models.Model):
    title = models.CharField(max_length=20000)
    date = models.DateTimeField(editable=True, null=True)
    text = models.TextField(max_length=50000)
    is_super = models.IntegerField(default=0)

class Image(models.Model):
    foreing = models.ForeignKey(Post)
    image = models.ImageField(null=True, blank=True, upload_to='my-images')

查看我在哪里上传并显示所有posts（我在这里显示）：

class IndexView(generic.ListView):
    paginate_by = 4
    template_name = 'home/index.html'
    context_object_name = 'all_posts'

    def get_queryset(self):
        query = self.request.GET.get('q')
        if query:
            posts = Post.objects.filter(
                Q(text__icontains=query.capitalize()) |
                Q(title__icontains=query.capitalize()) |
                Q(text__icontains=query.lower()) |
                Q(title__icontains=query.lower())
            ).distinct()
            return posts
        else:
            return Post.objects.filter(date__lte=timezone.now()).order_by('-date')

我创建了一个新的 post:

def post_new(request):
    ImageFormSet = modelformset_factory(Image, form=ImageForm, extra=3)
    if request.method == "POST":
        form = PostForm(request.POST, request.FILES or None)
        formset = ImageFormSet(request.POST, request.FILES, queryset=Image.objects.none())
        if form.is_valid() and formset.is_valid():
            post = form.save(commit=False)
            post.date = timezone.now()
            post.save()
            for form in formset.cleaned_data:
                image = form['image']
                photo = Image(foreing_id=post.id, image=image)
                photo.save()
            return render(request, 'home/page.html')
        else:
            form = PostForm()
        return render(request, 'home/edit_post.html',
                  {'form': form, 'error_message': 'something error message'})
    else:
        form = PostForm()
        formset = ImageFormSet(queryset=Image.objects.none())
    return render(request, 'home/edit_post.html', {'form': form, 'formset': formset})

这里我需要为所有这些显示图像 posts:

这是显示的图片

        <div class="profile-img-container" style="text-align: center">
            <img class="img" src="images">
            <a target="_blank" title="****." href="URL to the uploaded image"><span class="fa fa-expand fa-5x" style="color: darkcyan" aria-hidden="true"></span></a>

完整 index.html 如果需要:

<div class="content">
{% for post in all_posts %}
    <div class="thumbnail">
        <p style="text-align: center">{{ post.title }}</p>
            <p class="text" style="text-align: center; height: 40px; overflow: hidden">{{ post.text }}</p>
                <p><a type="button" class="btn btn-primary" href="{% url 'klass:detail' post.id %}">More...</a></p>
            <div class="profile-img-container" style="text-align: center">
                <img class="img" src="/media/**display images**" style="height: 150px">
                <a target="_blank" title="****." href="**url to images**"><span class="fa fa-expand fa-5x" style="color: darkcyan" aria-hidden="true"></span></a>
            </div>
            {% if user.is_authenticated %}
                <form method="post" style="text-align: right">
                <p>
                    {% csrf_token %}
                    <a methods="post" role="button" class="btn btn-info" href="{% url 'klass:favorite' post.id %}">
                        <i class="fa fa-heart" style="color: red" aria-hidden="true"></i>great! {{ post.is_super }}
                    </a>
                </p>
                </form>
                <span style="margin-left: 90px">Published: {{ post.date }}</span>
            {% else %}
                <p style="text-align: right">****<br>
                <a role="button" class="btn btn-info disabled" style="text-align: right">
                <i class="fa fa-heart" aria-hidden="true"></i>great!</a>
                {{ post.date }}
                </p>
            {% endif %}
    </div>
{% endfor %}

编辑

urls:

from django.conf.urls import url, include
from django.contrib import admin
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^home_page/', include('home.urls', namespace='home')),
    url(r'^captcha/', include('captcha.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

设置：

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'home/static'),
]

MEDIA_URL = '/media/'

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

家庭应用中的另一个 url：

from django.conf.urls import url
from . import views

app_name = 'home'

urlpatterns = [
    ***,
    url(r'^$', views.IndexView.as_view(), name='index'),
    url(r'^(?P<post_id>[0-9]+)/$', views.comments, name='detail'),
    url(r'^(?P<post_id>[0-9]+)/addcomment$', views.addcomment, name='comment'),
    url(r'^(?P<post_id>[0-9]+)/favorite/$', views.favorite, name='favorite'),
    url(r'^(?P<pk>[0-9]+)/edit/$', views.post_edit, name='edit'),
    url(r'^post/new/$', views.post_new, name='post_new'),
    url(r'^(?P<post_id>[0-9]+)/delete_album/$', views.delete_post, name='delete_post'),
    ****,
]

Answer 1

您应该遍历 post.image_set.all 并分别显示每个图像，例如：

{% for image in post.image_set.all %}
<div class="profile-img-container" style="text-align: center">
  <img class="img" src="{{ image.image.url }}" style="height: 150px">
  <a target="_blank" href="{{ image.image.url }}">
    <span class="fa fa-expand fa-5x" style="color: darkcyan" aria-hidden="true"></span>
  </a>
</div>
{% endfor %}

一些旁注：

您不应该在图像 url 中包含 /media，因为它会被 Django 自动附加。
出于可读性原因，不建议将您的外键命名为 foreign（同时检查您的拼写）。考虑将其重命名为使用小写的父模型名称（例如 post），使其变为 post = models.ForeignKey(Post)
不推荐使用 _id 引用外键。请改用模型本身，例如：photo = Image(post=post, image=image)

python - Django 使用外键显示上传的多张图片

python - Django display uploaded multiple images with foreign key

django

model

image

image-uploading