通过 JavaScript 在 Django 中显示图像

Posted 2023-02-24

【中文标题】通过 JavaScript 在 Django 中显示图像

【英文标题】：Displaying images in Django via JavaScript

【发布时间】：2013-07-22 16:31:53

【问题描述】：

我正在尝试创建一个包含名称列表的页面。每个名称都有自己的模态（注意：这是在for 循环中，因此为每个名称创建一个模态），其中包含名称、描述和图像。显示名称和标题，但不显示图像。

<!-- Toggle Button -->
% for name in User_list %
<li><a data-toggle="modal" data-id=" name " data-description=" name.description " data-image=" name.image " title="Add this item" class="open-AddBookDialog " href="#addBookDialog"> name </a></li>
% endfor %



<!-- Modal -->
<div class="modal hide fade" id="addBookDialog">
    <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h3 id="nameId" /></h3>

    </div>
    <div class="modal-body">
        <p id="nameDescription" /></p>
        <div id='images'></div>


    </div>
</div>

<!-- javascript -->
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () 
 var myNameId = $(this).data('id');
 var myNameDescription = $(this).data('description');
 var thumb = $(this).data('image');
 $(".modal-header #nameId").html( myNameId );
 $(".modal-body #nameDescription").html( myNameDescription );
 $(".modal-body #images").html("<img>" ,src: thumb);
 //.html( myNameImage )
 // As pointed out in comments, 
 // it is superfluous to have to manually call the modal.
 );
</script>

我做错了什么，我该如何纠正（注意：我使用的是 Twitter-Bootstrap）

【参考方案1】：

html() 方法不接受两个参数。您正在尝试创建一个元素并初始化它的一些属性。尝试正确创建并附加它：

$("#images").empty().append($("<img>", src: thumb));

演示： http://jsfiddle.net/tGbG6/

<div id='images'></div> 元素的 id 应该是唯一的，因此您可以使用选择器 $("#images")（对于您拥有的其他选择器也是如此）...否则 jQuery 会做一些额外的不必要的工作。

参考资料：

html(): http://api.jquery.com/html/ append(): http://api.jquery.com/append/ http://api.jquery.com/jQuery/#creating-new-elements

【讨论】：

对不起，我的朋友，我是故意这样做的，尽管它仍然不会显示图像。在源代码中，它甚至没有将其读取为<img> 标签

@user2564732 我的错！我不知道我在想什么——html() 接受一个字符串，而不是一个 jQuery 对象。我刚刚更新了我的答案；应该可以的。

感谢您的更新！它现在重新调整代码并为我提供图像的来源。有没有办法实际显示它，因为它不会出现？请注意，每个模态都是在 for 循环中创建的

@user2564732 我不确定你的意思。你是什​​么意思“给我图像的来源”？你的意思是它显示它而不是图像本身？我认为这意味着路径不正确并且无法找到图像。检查 DOM 并确保 <img> 是它应该在的位置，并确保 src 是正确的

@user2564732 关于你的模态在一个 for 循环中 - 那么你在页面上有重复的 ids，这不好。你为什么要生成多个模态？您应该能够重用一种模式