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

正确实现方案 #

方式1：用with标签预先拼接onclick值 #

写法最清晰，不容易出现转义错误：

{% with onclick_val="onClick=photoClick('"|add:photo.filename|add:"')" %}
{% cloudinary photo.filename 
    width='300' 
    crop='fill' 
    class='item_photo' 
    id=photo.filename
    onclick=onclick_val %}
{% endwith %}

方式2：直接在标签参数内拼接 #

适合短属性场景，无需额外声明变量：

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

原有写法出错原因 #

1. 直接写onClick='photoClick(photo.filename)'时，标签参数内的photo.filename不会被解析为模板变量，只会作为普通字符串输出，无法拿到实际文件名
2. 在模板标签的参数内部嵌套{{}}属于非法语法，Django模板引擎无法正确解析这种嵌套结构
3. 注意属性名用小写onclick即可，HTML属性本身不区分大小写，Cloudinary标签会自动正确渲染到生成的img标签上

内容的提问来源于stack exchange，提问作者curtisp