javascript - una - rutas relativas arcgis
Rutas relativas de imágenes en JavaScript (3)
¿No puedes usar una clase de CSS? Si solo es 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á sin importar el entorno (siempre que las otras imágenes en su CSS funcionen).
Entonces, puedes simplemente establecer className en tu div consecuencia.
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?
Hay tres formas de especificar una ruta a una imagen en html:
- Completamente relativo:
<img src="kitten.png"/> - Absoluto con respecto al sistema de archivos, pero relativo al servidor actual:
<img src="/images/kitten.png"> - Absoluto en todos los aspectos:
<img src="http://www.foo.com/images/kitten.png">
El segundo método puede funcionar para usted.
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:
<body data-root="${rootContext}">
<!-- or whatever syntax your template layer uses -->
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.
<script>
var rootContext = ${rootContext} // or whatever syntax your template layer uses.
</script>
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.