Как прописать в javascript путь к ресурсам

150
10 декабря 2019, 05:20

Работаю с картой leafletjs и в коде javascript использую ссылки на 2 иконки. И если файлы иконок лежат вместе с тестовым html файлом все работает, но когда ложу все это дело в реальный проект иконки не отображаются, пробовал по разному прописывать пути, но к сожалению результатов не добился: так пути прописаны в тестовом рабочем файле:

iconUrl: 'leaf-green.png',
shadowUrl: 'leaf-shadow.png'

так пути прописаны в реальном файле проекта

iconUrl: '/static/img/map-icons/leaf-green.png',
shadowUrl: '/static/img/map-icons/leaf-shadow.png'

Путь к файлам лежит по адресу resources/static/img/map-icons

Сам тестовый файл проекта:

<!DOCTYPE html> 
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml"> 
<head> 
 
    <title>Quick Start - Leaflet</title> 
    <script src="/static/js/map_script.js" th:src="@{/static/js/map_script.js}"></script> 
 
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" 
          integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" 
          crossorigin=""/> 
 
    <!-- Make sure you put this AFTER Leaflet's CSS --> 
    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" 
            integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" 
            crossorigin=""></script> 
 
 
</head> 
<body> 
<div class="navbar-form navbar-right"> 
 
 
    <h2>Map</h2> 
    <div id="mapid" style=" height: 480px;"></div> 
 
 
    <script> 
 
        var mymap = L.map('mapid').setView([50.440989, 30.489694], 8); 
 
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { 
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', 
            maxZoom: 18, 
            id: 'mapbox.streets', 
            accessToken: 'your.mapbox.access.token' 
        }).addTo(mymap); 
 
        var greenIcon = L.icon({ 
            iconUrl: 'leaf-green.png', 
            shadowUrl: 'leaf-shadow.png', 
 
            iconSize:     [38, 95], // size of the icon 
            shadowSize:   [50, 64], // size of the shadow 
            iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location 
            shadowAnchor: [4, 62],  // the same for the shadow 
            popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor 
        }); 
 
        L.marker([50.440989, 30.489694],{icon: greenIcon}).addTo(mymap) 
            .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup(); 
 
        L.circle([50.518544, 30.234004], 1000, { 
            color: 'red', 
            fillColor: '#f03', 
            fillOpacity: 0.5 
        }).addTo(mymap).bindPopup("I am a circle."); 
 
        L.polygon([ 
            [48.512111, 32.260717], 
            [50.069991, 31.453183], 
            [49.234111, 28.468438] 
        ]).addTo(mymap).bindPopup("I am a polygon."); 
 
 
        var popup = L.popup(); 
 
        function onMapClick(e) { 
            popup 
                .setLatLng(e.latlng) 
                .setContent("You clicked the map at " + e.latlng.toString()) 
                .openOn(mymap); 
        } 
 
        mymap.on('click', onMapClick); 
 
    </script> 
 
</div> 
</body> 
</html>

Answer 1

/ - корень сайта

../ - родительский каталог

без слеша - текущий каталог.

Соответственно, чтобы ссылаться на какой-то конкретный файл из любого каталога, нужно писать /folder/subfolder/filename.ext

Другое дело, если к примеру, сайт находится не в корневом каталоге, тогда уже надо дописывать имя каталога сайта. Для более точной диагностики можно просто смотреть исходный код html, чтобы определить какой полный путь создается в том или ином случае.

READ ALSO
Как создать кастомную строку поиска
javascript

Как создать кастомную строку поиска

Всем приветХочу создать кастомную строку поиска на карте, как, например, на maps

 184
Изменения внешнего вида slick slider
javascript

Изменения внешнего вида slick slider

нужно сделать вот такую внешний вид у slick slider надо сделать так чтобы видна была кусок предыдущего слайда и кусок следующего (что бы было понятно...

 191
Не работает ограничение на тип вводимых данных JS
javascript

Не работает ограничение на тип вводимых данных JS

Не понимаю, почему любое вводимое значение в поле в консоли отображается как строка (будь то символ или число)В чем некорректность кода?

 170
Подсчитать пустые чекбоксы и передать id [закрыт]
javascript

Подсчитать пустые чекбоксы и передать id [закрыт]

Want to improve this question? Update the question so it's on-topic for Stack Overflow на русском

 184