django - 如何在 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)
解决方案
这实际上是一个关系问题,而不是编码问题。让我们深入了解它
这是您的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_qs
的photo_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 %}
根据您的需要进行编辑。
推荐阅读
- ios - 尝试将 maximumValue 设置为 UISlider 时应用程序崩溃
- javascript - 无法通过 mockData 搜索
- d3.js - 无法重置焦点顺序条形图
- javascript - React 组件道具不会随 redux 商店更新
- javascript - 使用 React Native PanGestureHandler 从下到上移动框
- arrays - 使用矢量化方法而不是 FOR 循环创建多维移位数组
- typescript - 验证数字精度的“真实”浮点字段
- php - 在 Symfony 控制器上调用“addFlash”方法后在数据库中保存 flash 消息
- python-sphinx - 忽略 sphinx 项目 URL 路径中的文档文件夹
- python - 从 Panda 中的列中获取位于前 n% 的值的百分比,例如 25%、50% 等或低于 n%