未找到传单标记生产环境角度 7

Question

我在角度项目中使用传单地图。
使用传单显示带有标记的地图。
这在 ng server 和 ng build 中正常工作。
但是当在构建中使用 --prod 时不显示标记图标。
标记图像路径错误。

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

如何解决这个问题？

Answer 1

对于生产构建，您肯定有不同的 Angular 配置，它可以对 CSS 中使用的资源进行指纹识别。很有可能是默认的 Angular 配置。

在这种情况下，您遇到了 Leaflet 与 webpack（它是 Angular CLI 引擎盖下的构建引擎）的兼容性错误，它修改了资源 URL，如Leaflet issue #4698 中所述。

对于您的情况，您有 2 个简单的解决方案：

• 使用Leaflet-defaulticon-compatibility 插件（我是作者）。只需在 Leaflet 之后导入插件 CSS 和 JS。

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

• 明确指定默认的图标图片资源，让 Leaflet 不再需要 URL 猜测，也不再被 webpack 的 URL 重写搞砸：

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