未找到传单标记生产环境角度 7 [英] Leaflet Marker not found production env angular 7

问题描述

I using leaflet map in angular project.
use of leaflet to show map with marker.
this work correctly in ng server and ng build.
but when use of --prod in build not show marker icon.
marker image path is wrong.

 http://127.0.0.1:8080/marker-icon.2273e3d8ad9264b7daa5.png%22)marker-icon-2x.png

how to resolve this problem ?

解决方案

You surely have a different Angular configuration for production build, which fingerprints resources used in CSS. High chance that is the default Angular configuration.

In that case, you are hitting the compatibility bug of Leaflet with webpack (which is the build engine under the hood of Angular CLI) that modifies resources URL, as described in Leaflet issue #4698.

You have 2 easy solutions for your case:

• use leaflet-defaulticon-compatibility plugin (I am the author). Simply import the plugin CSS and JS after Leaflet ones.

import 'leaflet/dist/leaflet.css';
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package
import * as L from 'leaflet';
import 'leaflet-defaulticon-compatibility';

• explicitly specify the default icon images resource, so that Leaflet no longer needs URL guessing and is no longer messed up by webpack's URL rewriting:

delete L.Icon.Default.prototype._getIconUrl;

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

这篇关于未找到传单标记生产环境角度 7的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！