Twitter Bootstrap modal no se muestra imagen remota

Question

estoy usando Twitter ventana modal de arranque para cargar una imagen remota

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

estoy following these docs

La imagen no está prestando correctamente en el modal.

puedo obtener una carga de datos en lugar confuso -

¿Qué está pasando? ¿Cómo puedo arreglarlo?

Answer 1

Al usar href para especificar contenido remoto para un modal, Bootstrap usa el método de carga de jQuery para recuperar el contenido, y luego pega el contenido recuperado en el elemento de cuerpo del modal. En resumen, solo tiene sentido cuando el contenido remoto (el valor href) carga HTML o texto.

Se espera lo que está viendo, ya que es lo mismo que pasaría si abrió el archivo gif en un editor de texto y lo pegó en una etiqueta HTML.

Para que funcione de la manera que desee, el href necesita apuntar a un documento HTML que contiene una etiqueta <img> que hace referencia a la imagen que desea en el modal.

Answer 2

Sí, tuve esto también. La respuesta que encontré es here.

he creado un enlace como este:

<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> 

Answer 3

En el post de Mark Robson - cambio 'esto' a 'this.href':

$("#modal_img_target").attr("src", this);

=>

$("#modal_img_target").attr("src", this.href); 

(No tengo reputación para comentar)