Why are beacon images not displaying correctly in vue2-leaflet on laravel?

Question

leaflet

Hello.
The problem is that the pictures of beacons. which fly away when building laravel.mix along the path: /public/build/images/vendor/leaflet/dist /{marker-icon.png} .
But, when the map is displayed in the browser, beacons are not displayed and broken results are given in the console due to the lack of a slash in the path like:
localhost:81/buildimages/vendor/leaflet/dist/marke...
If I add a slash after localhost:81/build in the address bar and open the address, then the picture appears:
localhost:81/build/images/vendor/leaflet/dist/mark...
Made by the office. tutorial: https://vue-leaflet.github.io/Vue2Leaflet/#/quicks...
Ran quickStart and injected the map intolaravel .
Until now, webpack.mix.js has 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 Map.vue component :

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

Tell me, please - why are the pictures given to a crooked address in the browser? The point is 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 to crutch:

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

But it didn't give any result.
PS. Question corrected.

Answer 1

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')
    });