Cómo configurar el src de la imagen usando jQuery


Estoy intentando cambiar el atributo image src usando jQuery

jQuery("#imageID").attr('src','http://localhost:8080/images/1/myImage.png' );

Usando el código anterior puedo cambiar el atributo src, pero cuando intento esto: -

jQuery("#imageID").attr('src',jQuery("#imageBlock").css('background-image') );

No puedo cambiar el src.

Proporcionado

alert ( jQuery("#imageBlock").css('background-image') );

Devuelve:

Url ( http://localhost:8080/images/1/myImage.png )

Editar #1 Justo cuando estaba a punto de aceptar la solución. Debo decir, casi toda la solución funcionó en FF. Lo intenté:

  • slice (4,-1);
  • dividir ("( " ) [1 ] > luego reemplazar ( ")" , "" );

Supongo que otros también funcionarán. Pero ninguna de las soluciones está funcionando en IE. Razón de ser: mientras que FF devuelve:

Url ( http://localhost:8080/images/1/myImage.png )

IE devuelve:

Url (" http://localhost:8080/images/1/myImage.png")

^^ ten en cuenta las citas aquí

Ahora, ¿cuál podría ser la forma genérica para establecer el attr de src. ¿Necesito probar el navegador si es IE o no?

Este es el código de trabajo.

var src = "";
    if ( jQuery.browser.msie ) {
        src = jQuery("#imageBlock").css('background-image').slice(5,-2);        
    }else{
        src = jQuery("#imageBlock").css('background-image').slice(4,-1);
    }   
    jQuery("#imageID").attr('src', src );

Realmente no me gusta :x. Si hay otra solución que esta, entonces por favor hágamelo saber o de lo contrario aceptaré la slice solución de inmediato.

Author: Rakesh Juyal, 2010-02-02

4 answers

IMO, slice es más apropiado que substring o replace. Prueba esto:

jQuery("#imageID").attr(
    'src',
    jQuery("#imageBlock").css('background-image').slice(4,-1)
);

Aquí, estás segmentando la cadena entre url( y ). Ver MDC en slice para una descripción detallada del método.

 35
Author: Andy E,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-02-02 10:48:41

Necesitas extraer la parte url:

var backgroundImage = $("#imageBlock")
    .css('backgroundImage')
    .replace(/"/g,"")
    .replace(/url\(|\)$/ig, "");
jQuery("#imageID").attr('src', backgroundImage);
 7
Author: Darin Dimitrov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-02-02 10:51:07

Es porque la cadena url() está envuelta alrededor de ella. Tendrá que eliminarlo de la cadena, por ejemplo, usando la función reemplazar...

var bgimg = jQuery("#imageBlock").css('background-image').replace('url(', '');
bgimg.replace(')', '');
 2
Author: davydepauw,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-02-02 10:50:08

Tendría que quitar las partes url( y cerrar ) para que eso funcione.

So url(http://localhost:8080/images/1/myImage.png)

Se convierte en

http://localhost:8080/images/1/myImage.png

Puede hacer esto con una subcadena, un reemplazo de expresiones regulares o cualquier método de su elección.

Http://www.w3schools.com/jsref/jsref_replace.asp

Tal vez:

jQuery("#imageID").attr('src',jQuery("#imageBlock").css('background-image').replace('url(','').replace(')','') )

 0
Author: Alex Sexton,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-02-02 10:46:10