Why nepravilno showing pictures of beacons in vue2-leaflet on laravel?

Hi all.

The problem is that the pictures of the beacons. that fly when building laravel.mix path : /public/build/images/vendor/leaflet/dist/{marker-icon.png} .

But, when displaying maps in a browser, beacons are not displayed and are broken results in the console because of the lack of slash in the path like:
localhost:81/buildimages/vendor/leaflet/dist/marke...
If the slash is added after the localhost:81/build in the address bar and open the address, the picture appears:
localhost:81/build/images/vendor/leaflet/dist/mark...
Done At the office. the tutorial: https://vue-leaflet.github.io/Vue2Leaflet/#/quicks...

Fulfilled quickStart and implemented a map in laravel.

Until now webpack.mix.js not changed:
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$/)
]
});

Here is the component 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>
<t-map>
</div>
</template>

the <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>

Tell me, please - why the images are given on a curve to the address in the browser? The case in laravel.mix or in the block:
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')
 });

?

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

But the result is not given.

PS. Issue fixed.
April 4th 20 at 00:42
1 answer
April 4th 20 at 00:44
Solution
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')
 });

Find more questions by tags LeafletWebpackVue.js