2010-02-02 19 views
41

Estoy tratando de cambiar el atributo de imagen src usando jQueryCómo ajustar la imagen src usando jQuery

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

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

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

no puedo cambiar el src.

proporcionan

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

devuelve:

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

Edición # 1 justo cuando estaba a punto de aceptar la solución. Debo decir que casi toda la solución funcionó en FF. Intenté:

  • slice (4, -1);
  • división ("(") [1]> luego reemplazar (")", "");

Creo que los demás también funcionarán. Pero ninguna de las soluciones está funcionando en IE. La razón de ser: mientras vuelve FF:

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

IE Devuelve:

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

^^ mente la citas aquí

Ahora, ¿cuál podría ser la forma genérica de configurar el atributo src? ¿Debo 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 no sea esta, por favor avíseme o de lo contrario aceptaré la solución slice de inmediato.

+0

[Este] [1] es simple y al punto. [1]: http://stackoverflow.com/questions/18867735/how-to-change-image-attrsrc-using-jquery –

Respuesta

34

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

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

Aquí, usted está cortando la cuerda en el medio url( y ). Consulte MDC en slice para obtener una descripción detallada del método.

+0

va a trabajar en el IE? –

+1

@Rakesh Juyal: Sí. De hecho, código 95% en IE yo mismo. El método de división se define en la tercera edición de ECMAScript y está en MSDN: http://msdn.microsoft.com/en-us/library/6w1bzf9f(VS.85).aspx. –

0

Debería quitar las piezas url( y cerrar ) para que funcionen.

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

convierte

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

Usted puede hacer esto con una subcadena, una expresión regular o sustituir 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(')',''))

2

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

var bgimg = jQuery("#imageBlock").css('background-image').replace('url(', ''); 
bgimg.replace(')', ''); 
7

Hay que extraer la parte url:

var backgroundImage = $("#imageBlock") 
    .css('backgroundImage') 
    .replace(/"/g,"") 
    .replace(/url\(|\)$/ig, ""); 
jQuery("#imageID").attr('src', backgroundImage); 
+0

btw, wht es esto 'replace (/ url \ (| \) $/ig," ");' –

+0

Reemplaza la parte url() de la cadena con "" para que obtenga la ubicación de la imagen en propio. –

+0

Está eliminando el '" 'necesario? Siempre pensé que el navegador devolvió la representación analizada de la cadena url, que es sin comillas? Además, si estoy equivocado, ¿no debería ser la expresión regular'/["']/g'? –

Cuestiones relacionadas