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.

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á utilizando mi miembro del equipo para el desarrollo (estoy seguro de que no se está desarrollando en mi servidor). Esto significa que las rutas absolutas no funcionarán.

¿Hay una manera simple de superar este problema? ¿Como hacer que el guión sea consciente de su camino?

Las rutas mudables (dominios de prueba / estadificación / 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 HTML. El lugar obvio para hacer esto es en su capa de plantilla. Por ejemplo:

  

Y tómalo con javascript para usar en tus scripts.

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

Tenga en cuenta que solo puede hacer esto cuando el DOM está listo (o cuando document.body está disponible, difiere del navegador cruzado);)

Una alternativa y, en mi opinión, una opción menos bonita es simplemente renderizar javascript.

  

Al menos con la técnica de “raíz de datos”, puede almacenar el valor donde desee y evitar una definición global.

Entonces, en su código donde hace referencia a una imagen, puede hacer lo siguiente:

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

O crea 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 puede escribir algún código para garantizar el uso adecuado de / y otras cosas.

¿No puedes usar una clase de CSS? Si solo se trata de un div contiene un img , puedes deshacerte 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).

Entonces, puedes simplemente establecer className en tu div consecuencia.

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

  • Completamente relativo:
  • Absoluto con respecto al sistema de archivos, pero relativo al servidor actual:
  • Absoluto en todos los aspectos:

El segundo método puede funcionar para usted.