جافا سكريبت - نافذة منبثقة لتويتر بوتستراب لا تعرض الصورة عن بُعد

أنا أستخدم نافذة مودال الخاصة بتويتر بوتستراب لتحميل صورة عن بُعد

<a href="assets/500x300.gif" data-target="#image-preview" data-toggle="modal"><img alt="250x150" src="/assets/250x150.gif"></a>

أنا أتبع هذه المستندات

الصورة لا تظهر بشكل صحيح في النافذة المنبثقة.

بدلاً من ذلك أحصل على كمية من البيانات المختلطة

ماذا يحدث؟ كيف يمكنني الإصلاح؟

الإجابة رقم 1

نعم، لقد واجهت هذا أيضًا. الإجابة التي وجدتها هنا.

لقد أنشأت رابطًا مثل هذا:

<a href="gallery/blue.jpg" class="thumbnail img_modal">

//handler for link
$('.img_modal').on('click', function(e) {
    e.preventDefault();
    $("#modal_img_target").attr("src", this);
    $('#modal').modal('show');
});

//and modal code here

<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Title to go here</h3>
    </div>
    <div class="modal-body">
        <img id="modal_img_target">
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>

الإجابة رقم 2

عند استخدام href لتحديد محتوى عن بُعد للنموذج، يستخدم Bootstrap طريقة load الخاصة بـ jQuery لجلب المحتوى، ثم يضع المحتوى المسترجع في عنصر جسم النموذج. باختصار، هذا منطقي فقط عندما يقوم المحتوى عن بُعد (قيمة href) بتحميل HTML أو نص.

ما تراه متوقع، لأنه نفس الشيء الذي سيحدث إذا فتحت ملف الـ GIF في محرر نصوص، ثم قمت بلصقه في وسم HTML.

لكي يعمل بالطريقة التي تريدها، يجب أن يشير href إلى مستند HTML يحتوي على وسم <img> يُشير إلى الصورة التي تريدها في النافذة المنبثقة.