¿Cómo configuro una URL de CSS en una ubicación absoluta?

Question

Estoy trabajando en una aplicación móvil HTML5 y que inicialmente tiene el fondo de un elemento DIV establecido a través de la CSS de la siguiente manera:

background-image: url('images/ClanSpider.png'); 

En mi aplicación, tengo un método que cambia el fondo basado en DIV una selección hecha en una lista desplegable de un método anterior utilizando jQuery:

function ResetMyHonor() 
{  
    ClanImage = 'images/Clan' + MyClanName + '.png'; 
    $("#MyClanName").html(MyClanName); 
    $("#MyHonorBox").css('backgroundImage', 'url(' + ClanImage + ')'); 
} 

Todo esto funciona bien cuando estoy en la raíz de mi página. Sin embargo, tengo algunos enlaces dentro de la aplicación que usan etiquetas hash para navegar por la página (como #MyHonor). Cuando he navegado a una de estas etiquetas y llamo a mi función de reinicio anterior, la imagen se rompe. Cuando abro Chrome Inspector para mirar la etiqueta DIV, dice que la imagen que está intentando cargar es "images/MyHonor/ClanSpider.png" que no existe.

Sé que la URL de CSS generará enlaces en referencia a su ubicación dentro de la aplicación, pero no importa dónde mueva los archivos CSS en la aplicación.

¿Hay alguna manera de reescribir lo que sale del procesamiento de url o una forma alternativa de especificar la imagen de fondo del DIV sin realizar ningún tipo de procesamiento del lado del servidor? Idealmente, esta aplicación se ejecutará a través de la función de caché de manifiesto de HTML5, por lo que no tendré acceso a ningún idioma basado en el servidor.

Answer 1

De la lectura a través de sus comentarios sobre las otras respuestas creo que va a crear un problema por sí mismo Eso no Realmente existe. Si url('/images/ClanSpider.png') va a funcionar cuando lo cargue en el servidor web, entonces el truco es hacer que funcione de la misma manera cuando se trabaja localmente. Con mucho, la manera más fácil de hacerlo, especialmente si su enfoque es una aplicación fuera de línea que tiene pocos requisitos de servidor (que asumo es cierto, como mencionó file:/// URI), es ejecutar un servidor web local .

barcos Python con un módulo SimpleHTTPServer, si usted tiene Python installed continuación, empezando es tan simple como ir a su directorio L5RHonor proyecto en un símbolo del sistema y ejecute el siguiente comando:

python -m SimpleHTTPServer 

Entonces, en lugar de acceder a su archivos con URIs como este:

file:///H:/Projects/L5RHonor/images/ClanSpider.png 

se accede a ellos de esta manera:

http://localhost:8000/images/ClanSpider.png 

Todas las rutas de acceso de sus archivos raíz funcionarán correctamente, como una ventaja adicional el almacenamiento en caché sin conexión funcionará correctamente en Chrome y podrá ver desde el registro en la ventana del símbolo del sistema que está solicitando y almacenando en caché el Corrija los archivos de acuerdo con su manifiesto.

Answer 2

La ubicación del archivo CSS es irrelevante, está modificando la propiedad .style de un elemento HTML. Esto es lo mismo que usar el atributo de estilo .

Como se trata de CSS incrustado en el documento, todos los URI son relativos al documento .

es probable que desee iniciar la URL con una /, o si realmente desea la ubicación absoluta especificada en su pregunta: http://

Answer 3

trate de poner una barra inicial en esos caminos para representar la raíz.

es decir, el uso:

url('/images/ClanSpider.png') 

en lugar de

url('images/ClanSpider.png') 

Answer 4

trate de añadir un / al comienzo de la URL?

Answer 5

La solución más simple es, obviamente, agregar una barra inclinada a la URL para hacerlo absoluto. Eso funcionará bien, pero hace imposible mover la aplicación a un subdirectorio o mover recursos estáticos a un servidor diferente. Si eso es un problema, hay varias formas alternativas.

Si el número de posibles imágenes de fondo es finito, se podría definir cada uno en una clase propia:

.bgSpider { background-image: url('images/ClanSpider.png'); } 
.bgFalcon { background-image: url('images/ClanFalcon.png'); } 
... 

y luego hacer un .addClass() para establecer la imagen correcta.

Aparte de eso, hasta donde yo sé, no hay forma de especificar una ruta relativa a la hoja de estilos (en lugar del documento actual) al establecer una ruta de imagen de fondo en Javascript.Usted tendría que trabajar con rutas absolutas, o definir una ruta de raíz en JavaScript, y el uso que:

// in the script head 
imageRoot = "http://www.example.com/mysite/images"; 
// later.... 
$("#MyHonorBox").css('backgroundImage', 'url(' + imageRoot + ClanImage + ')');