Question

我正在尝试使用Django设置加载到我的html文件中的图像的高度：

<img data-original={{img.url}} width='310' height=calcHeight({{img.height}}, {{img.width}})/>

使用'calcHeight（h，w）'函数是一个简单的函数，可以根据宽度310来缩放图像的高度。我必须这样做，因为我使用了一个需要生成空占位符的lazyloader插件对于加载图像本身之前的图像。图像具有不同的尺寸，因此我需要在加载实际图像之前获得图像的高度和宽度，否则在加载实际图像之前占位符将是“无高度”，导致布局混乱进行中。

上面的代码不起作用，我猜这是因为你不能像这样调用高度函数。我希望我能够准确地解释这个问题，并提前感谢任何提示！

Answer 1

你不能调用一个带有Django模板内部参数的函数。为了实现这一点，您需要write a template tag or filter yourself。

然后你可以做类似的事情：

{% my_img_tag img.url img.height img.width %}

您的代码构造函数中会包含哪些内容：

def my_img_tag(url, height, width):
    new_height = calcHeight(height, width)
    return {'url': url, 'height': new_height, 'width': width}

你的模板可能是这样的：

<img data-original="{{url}}" width="{{width}}" height="{{height}}"/>

Answer 2

我通过计算一旦保存到django数据库的图像的缩放高度来解决这个问题：

def save(self, *args, **kwargs):
    self.photo_scaledHeight = self.photo_height * (310/self.photo_width)
    super(Post, self).save(*args, **kwargs)

我添加了字段＆＃39; photo_scaledHeight＆＃39;到使用照片的模型所以我可以简单地在我的模板中调用它：

<img data-original={{photo.url}} width='310' height='{{photo_scaledHeight}}' />

@ lucas-lazaro指出我正确的方向

用函数设置html img元素的高度

2 个答案: