首页 > 解决方案 > 如何在 django 模板中显示 img 文件?

问题描述

我知道标题有点误导,但我解释了一切。我正在 django 中创建商店,有一个小问题我不知道如何解决。好吧,对于每个产品,我想分配几张我保存在数据库中的照片。这就是我创建Photo模型的原因,该Book模型使用ForeignKey.

整个问题是我不知道如何在商店的主页上显示分配给特定书籍的照片之一。当然,页面上有很多书是在for loop.

如果有帮助,我将每本书的图片保存在单独的文件夹中,该功能content_file_name负责

当然,我对实现上述效果的其他想法持开放态度。我不确定我选择的路径是否是最优的。

#models.py

def content_file_name(instance, filename):
    ext = filename.split('.')[-1]
    filename = "%s.%s" % (instance.book.slug, ext)
    return os.path.join('books_img', instance.book.slug, filename)


class Book(models.Model):
    title = models.CharField(max_length=100)
    author = models.CharField(max_length=300)
    publisher = models.CharField(max_length=100)
    price = models.FloatField()
    slug = models.SlugField()
    seller = models.ForeignKey(User, on_delete=models.CASCADE)


class Photo(models.Model):
    book = models.ForeignKey(Book, on_delete=models.CASCADE)
    file = models.ImageField(default=random_img, upload_to=content_file_name)
    uploaded_at = models.DateTimeField(auto_now_add=True)

标签: djangodjango-templates

解决方案


这实际上是一个关系问题,而不是编码问题。让我们深入了解它

这是您的Book课程的简短版本,用于说明。

class Book(models.Model):
    pass

这是您的Photo课程的简短版本,用于说明。

class Photo(models.Model):
    book = models.ForeignKey(Book, on_delete=models.CASCADE)
    file = models.ImageField(default=random_img, upload_to=content_file_name)

什么是ForiegnKey?-ForiegnKey只是一个花哨的名字ManyToOne吗?,这里有什么很多,一个是什么?

好吧,我们有一本书有多张照片。所以照片有一个Key,就像门钥匙,它只打开的门,它是一个Key

您的Photo班级有一个名为 book 的班级变量。调用它会像Photo.book. 但是,因为 django 也起作用,所以调用反向关系将是反向关系book.photo_qsphoto_qs默认名称。

让我们改进它。

class Photo(models.Model):
    book = models.ForeignKey(Book, on_delete=models.CASCADE, related_name='photos')
    file = models.ImageField(default=random_img, upload_to=content_file_name)

现在,和以前一样,它仍然是photo.book但是book.photos(来自相关名称)

在英语中,每本书实例都有 .photos(相关经理类型)。所以如果你得到一本书

my_book = Book.objects.all()[0]

这本书有 .photos 类型(相关管理器),使用起来会像

my_book.photos.all()

到这里为止没关系,现在的问题是您想在模板中发送带有书籍详细信息的图像,

你的观点是

def my_view(request):
    my_book = Book.objects.all()[0] # first book
    return render(request, 'my_template_path', context= {
        'my_book': my_book,
        })

现在您的模板可以访问my_book变量。

在您的模板中

{% for photo in my_book.photos.all %}
        <img src="{{ photo.file.url }}">
{% endfor %}

根据您的需要进行编辑。


推荐阅读