在模式中获取和显示图像

Question

我正在实现一项功能，如果用户单击缩略图，将弹出一个模式并使用 javascript 获取图像。

{% for image in images %}
    <img src="{{url_for('static', filename='path/'+username+'/thumbnails/'+image)}}"
    uk-toggle="target: #show-images" onclick="showImage({{username}}, {{image}})">
{% endfor %}

以上 uk-toggle 的模态代码

<div id="show-images" class="uk-flex-top" uk-modal>
    <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
    <button class="uk-modal-close-outside" type="button" uk-close></button>
    <img alt="Image Didn't Load" id="my_img">
</div>
</div>

JS

function showImage(username, imagename) {
fetch('path/'+username+'/'+imagename)
    .then(response => response.blob())
    .then(function(response) {
        document.getElementById('my_img').src = URL.createObjectURL(response);
    })
    .catch(error => console.error(error));
}

我收到错误消息，图像未在模态中获取和呈现。

未捕获的语法错误：标识符在数字文字后立即开始对于另一张图片，我得到未捕获的 ReferenceError：未定义 caissalover

提前致谢。图片名称可以以数字开头，不像 javascript 变量想要的那样。

Answer 1

我在 jinja2 输入外添加了单引号。通过将变量转换为字符串为我解决了这个问题。

onclick="showImage('{{username}}', '{{image}}')"

在模式中获取和显示图像

Fetching and displaying images in a modal

javascript

modal-dialog

fetch

jinja2