configurar el fondo de imagen usando jQuery CSS propiedad

321

tengo una URL de la imagen en un imageUrl variable y estoy tratando de establecerlo como el estilo CSS, usando jQuery:configurar el fondo de imagen usando jQuery CSS propiedad

$('myObject').css('background-image', imageUrl);

Ésta parece ser que no trabaja, como:

console.log($('myObject').css('background-image'));

devuelve none.

¿Alguna idea, qué estoy haciendo mal?

Fuente

2009-02-04 Blankman

¿Cuál es exactamente el problema? ¿Jquery está arrojando un error? –

No, no lo está configurando correctamente. Lo estoy registrando y simplemente no está cambiando. – Blankman

La primera vez que jQuery no intenta adivinar a qué se refería el usuario. – galambalazs

803

es probable que desee esto (para que sea como una declaración CSS-imagen de fondo normal):

$('myOjbect').css('background-image', 'url(' + imageUrl + ')');

Fuente

2009-02-04 16:15:26 Greg

Lo estaba haciendo de esta manera, pero un espacio entre 'url' y el paréntesis izquierdo estaba causando que mi código fallara. Copió/pegó el suyo y se dio cuenta del problema. ¡Gracias! – pmartin

usted querrá incluir comillas (") antes y después de la imageUrl como esto:

$('myOjbect').css('background-image', 'url("' + imageUrl + '")');

De esta manera, si la imagen tiene espacios todavía será establecido como una propiedad

Fuente

2011-03-10 17:07:52 Arosboro

Las URL no pueden tener espacios en ellas. Los espacios necesitan ser codificados. –

en ese caso, debe ser '$ ('myObject'). Css ('background-image', 'url (' + encodeURIComponent (imageUrl) + ')');' – Arosboro

Las cotizaciones no son necesarias: http: // stackoverflow.com/questions/2168855/css-url-are-quotes-needed – nullability

Aquí está mi código:.

$('body').css('background-image', 'url("/apo/1.jpg")');

Enjoy, amigo

Fuente

2011-07-02 18:10:53 Apo

Como alternativa a lo que los otros están sugiriendo correctamente, me resulta más fácil por lo general para alternar clases CSS, en lugar de los ajustes individuales (especialmente CSS URL de imágenes de fondo). Por ejemplo:

// in CSS 
.bg1 
{ 
    background-image: url(/some/image/url/here.jpg); 
} 

.bg2 
{ 
    background-image: url(/another/image/url/there.jpg); 
} 

// in JS 
// based on value of imageUrl, determine what class to remove and what class to add. 
$('myOjbect').removeClass('bg1').addClass('bg2');

Fuente

2011-07-02 18:16:48 Kon

Esta es una forma mucho mejor de hacer las cosas porque le permite usar un preprocesador css. – calumbrodie

Esto es genial, mucho mejor que la solución más directa. – Magicode

Sin embargo, va a cargar ambas imágenes. – sheriffderek

Además de las otras respuestas, también puede usar "fondo". Esto es particularmente útil cuando se desea establecer otras propiedades relacionadas con la forma en que la imagen es utilizada por el fondo, tales como:

$("myObject").css("background", "transparent url('"+imageURL+"') no-repeat right top");

Fuente

2013-02-27 15:37:50

Esta respuesta tiene más sentido cuando pensé que la operación original había utilizado el fondo, no la imagen de fondo. He modificado mi respuesta para que tenga más sentido, y lo dejaré aquí para la posteridad de todos modos. –

Esto no funciona ahora. – Ionut

Para aquellos que utilizan una URL real y no una variable:

$('myObject').css('background-image', 'url(../../example/url.html)');

Fuente

2013-10-01 00:36:36 Dusty

Interpolación de cadenas al rescate.

let imageUrl = 'imageurl.png'; 
$('myOjbect').css('background-image', `url(${imageUrl})`);

Fuente

2017-02-18 01:47:14

intente modificar el atributo "estilo":

$('myObject').attr('style', 'background-image: url("' + imageUrl +'")');

Fuente

2017-05-29 02:37:59 appcropolis

-2

$('myObject').css({'background-image': 'url(imgUrl)',});

Fuente

2017-08-02 23:28:27 wahaj

Esto no funcionará porque la url está encerrada en comillas simples. – Sal

configurar el fondo de imagen usando jQuery CSS propiedad

Respuesta

Cuestiones relacionadas