javascript - 未找到传单标记生产环境

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

如果有人可以帮忙!

Answer 1

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

您可以验证这是您的问题，购买验证此参数(在运行时):L.Icon.Default.prototype._getIconUrl() .
正确的值应该是 <some_directory>/leaflet/dist/images/ .
然而，如果这个错误发生在你身上，它的值(value)是: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 更改为 Assets 文件夹中的有效图像)。

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