Django cloudinary 图像如何在模板 % % 标签中添加 onClick 事件？

Posted 2023-03-25

【中文标题】Django cloudinary 图像如何在模板 % % 标签中添加 onClick 事件？

【英文标题】：Django cloudinary image how to add onClick event in template % % tag?Django cloudinary 图像如何在模板 % % 标签中添加 onClick 事件？

【发布时间】：2021-11-27 20:32:04

【问题描述】：

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

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

这会导致 html img 标签：

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

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

我希望 html 标记看起来像：

<img 
    class="item_photo" 
    id="xxxxxx"         
    
    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 %

|add:'onClick=photoClick(' photo.filename |add:')' %

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

【参考方案1】：

您可以将 onClick 属性添加到 img 标记中，如下所示（例如 photo.filename=sample_image）：

% cloudinary photo.filename  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>" />