找不到传单标记生产环境

Question

传单有问题。

开发过程中一切正常，但在生产中，我的应用无法找到marker-icon.png和marker-shadow.png图像。

它正在寻找道路 assets/station/images/marker-icon.png

传单js包括这样的html.erb文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css" />

如果有人可以帮助！

Answer 1

import "leaflet/dist/images/marker-shadow.png";

如果使用 webpack，只需导入图像

Answer 2

下面的代码对我有用

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

Answer 3

这是Leaflet中的一个已知错误，根本问题是在捆绑过程中错误引用了Leaflet的图标图像位置。

您可以购买（在运行时）验证此参数，以验证这是您的问题：L.Icon.Default.prototype._getIconUrl()。
正确的值应为<some_directory>/leaflet/dist/images/。
但是，如果您遇到此错误，则其值为：data:image/png;base64,iVBO....K5CYII=")undefined

根据您使用的捆绑程序加载器（Vanila WebPack，Angular-Cli-WebPack的超集等），有不同的解决方案（变通方法）。

您可以在这里看到原始问题（以及根据您的bandle-loader的不同解决方案）：https :
//github.com/Leaflet/Leaflet/issues/4968

如果您使用的是Angular-Cli，则此功能将为您工作。在设置Maker之前，将此代码添加到一些软件中：

import { icon, Marker } from 'leaflet';
const iconRetinaUrl = 'assets/marker-icon-2x.png';
const iconUrl = 'assets/marker-icon.png';
const shadowUrl = 'assets/marker-shadow.png';
const iconDefault = icon({
  iconRetinaUrl,
  iconUrl,
  shadowUrl,
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  tooltipAnchor: [16, -28],
  shadowSize: [41, 41]
});
Marker.prototype.options.icon = iconDefault;

（此代码会将损坏的标记的网址更改为资产文件夹中的有效图像）。

并将以下代码添加到您的angular.json（对于Angular版本> = 6.x）或您的angular-cli.json（对于Angular版本<= 5.x）：

"assets":
[
   "src/favicon.ico",
   "src/assets",
   {
      "glob": "**/*",
      "input": "node_modules/leaflet/dist/images/", // you may need to change this path, according to your files structure
      "output": "./assets/"
   }
] ...

（此代码会将原始“标记”图像复制到/assets文件夹，以便angular-cli可以加载它们）

Answer 4

使用 Angular 10 工作

对我来说，将 PNG 文件复制粘贴到资源中并使用一个命令

ngOnInit() { L.Icon.Default.ImagePath = "assets/leaflet/" }

对于带有 Leaflet 1.7 的 Angular 13

ngOnInit() { L.Icon.Default.imagePath = "assets/leaflet/" }

Answer 5

也许尝试升级到传单的当前版本 - 我从未遇到过标记图标的此问题。

https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.css
https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.js