Почему непрвильно отображаются картинки маячков в vue2-leaflet на laravel?

Question

[EVOSandru6]

Всем привет.

Проблема в том, что картинки маячков. которые улетают при сборке laravel.mix по пути : /public/build/images/vendor/leaflet/dist/{marker-icon.png} .

Но, при отображении карты в браузере, маячки не выводятся и даются битые результаты в консоли из за отсутствия слэша в пути типа:
localhost:81/buildimages/vendor/leaflet/dist/marke...
Если слэш добавляю после localhost:81/build в адресной строке и открываю адрес, то картинка появляется:
localhost:81/build/images/vendor/leaflet/dist/mark...
Делал По оф. туториалу: https://vue-leaflet.github.io/Vue2Leaflet/#/quicks...

Выполнил quickStart и внедрил карту в laravel.

До сего момента webpack.mix.js не менял:

const mix = require('laravel-mix');
let webpack = require('webpack');

mix
    .setPublicPath('public/build')
    .setResourceRoot('build')
    .js('resources/js/app.js', 'front/js')
    .sass('resources/sass/app.scss', 'front/css')
    .js('resources/js/admin/app.js', 'admin/js')
    .sass('resources/sass/admin/app.scss', 'admin/css')
    .version();

mix.webpackConfig({
    plugins: [
        new webpack.IgnorePlugin(/^codemirror$/)
    ]
});

Вот компонент Map.vue:

<template>
    <div id="mapApp">
        <l-map :zoom="zoom" :center="center">
            <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
            <l-marker :lat-lng="marker"></l-marker>
        </l-map>
    </div>
</template>

<script>
    import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';
    import { Icon } from 'leaflet'
    import 'leaflet/dist/leaflet.css'

    Icon.Default.mergeOptions({
        iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
        iconUrl: require('leaflet/dist/images/marker-icon.png'),
        shadowUrl: require('leaflet/dist/images/marker-shadow.png')
    });

    export default {
        components: {LMap, LTileLayer, LMarker},
        mounted() {
            console.log('Map mounted.');
        },
        data() {
            return {
                zoom: 10,
                center: L.latLng(55.751244, 37.618423),
                url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
                marker: L.latLng(55.751244, 37.618423),
            }
        }
    }
</script>

<style lang="sass" scoped>
    #mapApp
        margin: 0
        height: 200px
</style>

Подскажите, пожалуйста - почему картинки отдаются по кривому адресу в браузере? Дело в laravel.mix или в блоке:

Icon.Default.mergeOptions({
        iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
        iconUrl: require('leaflet/dist/images/marker-icon.png'),
        shadowUrl: require('leaflet/dist/images/marker-shadow.png')
    });

?

Пробовал костылить:

/*$("img").each(function(){
        $(this).attr("onerror","this.src=’%new_path%'");
});*/

Но результата не дало.

PS. Вопрос исправлен.

Comments

[h8nor]

Проблема точно не в Leaflet.

Answer 1

[EVOSandru6]

Icon.Default.imagePath = '/';
    Icon.Default.mergeOptions({
        iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
        iconUrl: require('leaflet/dist/images/marker-icon.png'),
        shadowUrl: require('leaflet/dist/images/marker-shadow.png')
    });