Django cloudinary image 如何在模板 {% %} 标签中添加 onClick 事件？

Question

我成功创建了 Cloudinary 图像，如下所示：

{% cloudinary photo.filename 
    width='300' 
    crop='fill' 
    class='item_photo' 
    id=photo.filename %}

这导致 html img 标签：

<img 
    class="item_photo" 
    id="xxxxxx"         
    width="300"
    src="https://res.cloudinary.com/xxx/image/upload/c_fill,w_300/vxxx/xxx.jpg">

但是，我想向 img 添加一个 onClick 事件，但我无法找出正确的语法，或者即使可能也是如此。

我希望 html 标签看起来像：

<img 
    class="item_photo" 
    id="xxxxxx"         
    width="300"
    onClick=imageClick('xxxxxx')  <=== event variable is same as `id` value
    src="https://res.cloudinary.com/xxx/image/upload/c_fill,w_300/vxxx/xxx.jpg">

id 和 imageClick 变量本身由 Django 模板标记值填充 photo.filename。

我尝试过的一些事情：

onClick='photoClick(photo.filename)' %}

{% with add:'onClick=photoClick('{{ photo.filename }}|add:') as onclick %}{{ onclick }}{% endwith %}

|添加：'onClick=photoClick('{{ photo.filename }}|添加：')' %}

如何构建此模板标签的 onClick=photoClick(xxx) 部分？

Answer 1

您可以将 onClick 属性添加到 img 标签，如下所示（例如 photo.filename =sample_image):

{% cloudinary photo.filename width="300" crop="fill" class="item_photo" id=photo.filename onclick="photoClick(this)" %}

添加脚本函数photoClick()，可以接受img标签对象，可以处理为：

<script type="text/javascript">
    function photoClick(img) {
        
        console.log("The src data is: " + img.src);
        console.log("The id data is: " + img.id);
        
        var filename = img.src.substring(img.src.lastIndexOf('/')+1);
        console.log("The filename is: " + filename);
        
        // Other actions
        var src = img.src;
        window.open(src);
    }
</script>

生成的 HTML 标签将是：

<img class="item_photo" id="sample_image" onclick="photoClick(this)" src="https://<your_cloudinary_image_url_path>/sample_image.<ext>" width="300"/>

Django cloudinary image 如何在模板 {% %} 标签中添加 onClick 事件？

Django cloudinary image how to add onClick event in template {% %} tag?

django

cloudinary