Rutas relativas de imágenes en JavaScript

Tengo un módulo de javascript que crea un div con una imagen de un botón de cerrar ("X"). Este div y javascript se ubican en muchos lugares de mi sitio.Rutas relativas de imágenes en JavaScript

Solución de ruta relativa: cuando una página incluye el javascript, y el javascript usa una ruta relativa para la imagen. La ruta relativa de Rhe es relativa a la página html. Si las páginas HTML en diferentes rutas utilizan este javascript, necesitaré 2 imágenes diferentes.

Solución de ruta absoluta: No sé qué servidor está usando mi equipo para el desarrollo (estoy seguro de que no se está desarrollando en mi servidor). Esto significa que las rutas absolutas no funcionarán.

¿Existe una forma simple de solucionar este problema? ¿Como hacer que el guión sea consciente de su camino?

Fuente

2011-03-01 eshalev

Las rutas de acceso mudables (dominios de prueba/almacenamiento/producción) siempre son un problema en JavaScript, la mejor opción es incluir la ruta de acceso raíz de su aplicación/sitio web en el código HTML. El lugar obvio para hacer esto es en su capa de plantilla. Por ejemplo:

<body data-root="${rootContext}"> 
<!-- or whatever syntax your template layer uses -->

Y agárrelo con javascript para usar en sus scripts.

var rootContext = document.body.getAttribute("data-root");

Nota, sólo se puede hacer esto cuando el DOM está listo (o cuando document.body está disponible, se diferencia entre navegadores);)

Una alternativa y en mi opinión la opción menos bonita es simplemente render javascript.

<script> 
    var rootContext = ${rootContext} // or whatever syntax your template layer uses. 
</script>

Al menos con la técnica de 'datos-root', puede almacenar el valor donde quiera y evitar una definición global.

Así que en su código donde se hace referencia a una imagen, puede hacer lo siguiente:

img.src = rootContext + "/media/js/close.gif";

O crear un buen método de ayuda:

// lets use a namespace to avoid globals. 
var myApp = { 
    // still need to set this when DOM/body is ready 
    rootContext: document.body.getAttribute("data-root"), 
    getContext: function(src) { 
     return this.rootContext + src; 
    } 
} 

img.src = myApp.getContext("/media/js/close.gif");

En el método de ayuda, también se puede escribir algún código para garantizar el uso apropiado de/y otras cosas.

Fuente

2011-03-01 08:33:31 BGerrissen

¿Por qué no simplemente utiliza [''] (http://www.w3.org/TR/html5/semantics.html#the-base-element)? – Felix

Hay tres formas de especificar una ruta de acceso a una imagen en html:

Completamente relativos: <img src="kitten.png"/>
absoluta en relación con el sistema de archivos, sino en relación con el servidor actual: <img src="/images/kitten.png">
Absoluto en todos los sentidos: <img src="http://www.foo.com/images/kitten.png">

El segundo método puede funcionar para usted.

Fuente

2011-03-01 08:34:27 Benson

¿No puede simplemente usar una clase de CSS? Si es solo un div que contiene un img, puede deshacerse del img y usar background-image en el div. Al configurar esto desde CSS, se asegurará de que la ruta de la imagen siempre esté relacionada con el archivo CSS, y seguramente funcionará independientemente del entorno (siempre que las otras imágenes en su CSS funcionen).

Luego, puede configurar className en su div en consecuencia.

Fuente

2011-03-01 08:38:06 Felix

+1 en cuanto a las imágenes, siempre es mejor usar fondos CSS. – BGerrissen

Rutas relativas de imágenes en JavaScript

Respuesta

Cuestiones relacionadas