Относительные пути изображений в JavaScript

У меня есть модуль javascript, который создает div с изображением кнопки закрытия ("X"). Этот div и javascript размещены во многих местах на моем сайте.

Решение по относительному пути: когда страница содержит javascript, а javascript использует относительный путь для изображения. Относительный путь относительно HTML-страницы. Если HTML-страницы по разным путям используют этот javascript, мне понадобятся 2 разных изображения.

Решение по абсолютному пути: я не знаю, какой сервер использует мой член команды для разработки (я точно знаю, что он не разрабатывается на моем сервере). Это означает, что абсолютные пути не будут работать.

Есть ли простой способ преодоления этой проблемы? Как заставить сценарий как-то осознать свой путь?

ОТВЕТЫ

Ответ 1

Mutable paths (тестовые/промежуточные/производственные домены) всегда являются проблемой в javascript, лучшим вариантом является включение корневого пути вашего приложения/веб-сайта в HTML. Очевидное место для этого - в вашем шаблоне. Например:

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

И возьмите его с помощью javascript для использования в ваших скриптах.

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

Примечание. Вы можете сделать это только тогда, когда DOM готов (или когда document.body доступен, отличается кросс-браузер);)

Альтернатива и, на мой взгляд, менее привлекательный вариант - просто визуализировать javascript.

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

По крайней мере, с помощью метода "data-root" вы можете сохранить значение везде, где хотите, и избегать глобального определения.

Итак, в коде, где вы ссылаетесь на изображение, вы можете сделать следующее:

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

Или создайте хороший вспомогательный метод:

 // 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" );

В вспомогательном методе вы также можете написать код для обеспечения правильного использования/и еще чего-то.

Ответ 2

Не можете ли вы просто использовать класс CSS? Если это просто div, содержащее img, вы можете избавиться от img и использовать background-image на div. Установка этого параметра из CSS гарантирует, что путь изображения всегда относится к файлу CSS и почти наверняка будет работать независимо от среды (пока работают другие изображения в вашем CSS).

Затем вы можете просто установить className на свой div соответственно.

Ответ 3

Существует три способа указать путь к изображению в html:

  • Полностью относительный: <img src="kitten.png"/>
  • Абсолют относительно файловой системы, но относительно текущего сервера: <img src="/images/kitten.png">
  • Абсолютный во всех отношениях: <img src="http://www.foo.com/images/kitten.png">

Второй способ может работать для вас.