未找到传单标记生产环境

Question

我对传单有疑问。

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

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

Leaflet 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" />

如果有人可以帮忙！

原文由 maluss 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是 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;

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

并在你的 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 可以加载它们）

原文由 Gil Epshtain 发布，翻译遵循 CC BY-SA 4.0 许可协议