Obtener ruta URL relativa en CSS Javascript

tengo una imagen de fondo se define con una ruta relativa al archivo CSS.

.my-image-class { 
    background-image: url("../images/my_bg_image.png"); 
}

me gustaría cambiar esta ruta en JavaScript de forma que ahora apunta a ../images/my_updated_bg_image.png. Sin embargo, simplemente cambiar la declaración de estilo en JavaScript desafortunadamente cambia el significado de la ruta relativa desde la ubicación de CSS a la ubicación de HTML.

¿Hay alguna manera de extraer una URL absoluta de una URL de CSS relativa?

Si no, ¿hay alguna forma de extraer una URL absoluta de la fuente de una función de JavaScript actualmente en ejecución? Esto me daría la misma información porque mis archivos JS también son relativos a los archivos de imágenes.

¿Otras soluciones?

Esta es una pregunta similar a javascript - How to use a image file relative to a url path? pero el truco de intercambio de clases sugirió que no funcionaría para mí porque en realidad tengo una lista variable de estas imágenes de fondo.

EDITAR: Información de fondo. La aplicación web (basada en Django) está sirviendo contenido HTML completamente separado de js estáticos, imágenes y archivos css. El contenido estático está en

static/ 
    js/ 
    css/ 
    images/

estructura de archivos. Entonces sé las relaciones relativas entre estos archivos. Sin embargo, es probable que las URL absolutas del contenido HTML y el contenido estático cambien. Así que no quiero mezclar URLs codificadas para contenido HTML en mis archivos js si es que puedo evitarlo. Obtendré la plantilla de Django de un tercero, así que también me gustaría evitar editarla también.

Fuente

2011-04-03 mjhm

No estoy seguro de qué quiere decir con "mis archivos JS también son relativos a los archivos de imágenes", pero ¿hay alguna razón por la que un guión determinado no sepa la ruta absoluta a la imagen que intenta intercambiar?¿Por qué un bit dado de código JS necesita referirse a una imagen relativamente? Siempre puede usar 'document.URL' para descubrir la raíz del sitio, debe saber desde allí a dónde ir en un script. –

Ver información de fondo adicional. Espero que esto responda a tus preguntas. Gracias por tu interés. – mjhm

OK - No sé nada sobre la arquitectura de Django, pero asumo que * algo * sabe la raíz desde la que se está sirviendo un árbol de contenido determinado. En asp.net, para soportar directorios virtuales, simplemente hago que el servidor muestre algo como 'app.rootUrl = '/ vdir /'' y lo uso cuando necesito saber mi lugar en JS. Desearía que estuviera fácilmente disponible sin tener que hacer eso, pero 20 caracteres adicionales en cada página ahorran muchos dolores de cabeza :) –

Las URL en las hojas de estilo CSS son relativas al archivo CSS en el que aparecen (incluso si @import ed). Si aparecen en HTML, están relacionados con la URL base del archivo HTML, que suele ser la URL del archivo HTML, a menos que haya un elemento <base href=...> en el HTML.

Por lo tanto, debe determinar la URL absoluta contra la que se resuelve la URL relativa y luego calcular una URL relativa para su imagen.

Puede intentar ver si la imagen anterior está siendo servida desde múltiples lugares diferentes. Muchos servidores web acumulan cruxt y tal vez solo está colocando la nueva imagen en un lugar lógico, pero aún equivocado.

EDIT:

Hay una variedad de opciones en el medio relativos ../foo URL absolutas y ruta de estilo.

Vías absolutas: /images/myImage.png.

Protocolo de URL relativos: //my-domain.com/image/myImage.png

Cualquiera de ellas podría dejarle un mejor equilibrio entre especificar todo lo que necesita, pero no más.

Fuente

2011-04-03 17:33:52

Ver información de fondo añadida. Espero que aclare más lo que busco. – mjhm

@mjhm, Editado. Espero que esto ayude. –

Lo siento, no es exactamente lo que estoy buscando. El css, las imágenes y js están todos relacionados uno con el otro, así que en mi mundo perfecto (posiblemente de cuento de hadas) debería haber una forma de que los js naveguen por los caminos de css e imágenes sin tener que saber nada a priori sobre absoluto rutas o cualquier otra cosa fuera de su estructura de directorio común. – mjhm

Obtener ruta URL relativa en CSS Javascript

Respuesta

Cuestiones relacionadas