Django cloudinary image как добавить событие onClick в тег?

Я успешно создаю образ 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">

Однако я хочу добавить событие onClick к img, но не могу понять правильный синтаксис или даже возможно ли это.

Я бы хотел, чтобы 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 %}

>

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

Как я могу построить часть onClick=photoClick(xxx) этого шаблонного тега?

Вы можете добавить атрибут 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"/>
Вернуться на верх