找不到传单标记生产环境 [英] Leaflet Marker not found production env

问题描述

我对传单有疑问.

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

Everything is working fine in development, but in production, my app isn't able to locate the marker-icon.png and marker-shadow.png images.

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

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

Leaflet js is including like this in my html.erb file

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

如果有人可以帮忙！

推荐答案

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

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

This is a known bug in Leaflet, the root issue is that Leaflet's icon image location is been wrongly referenced during bundling.

You can verify that this is your issue, buy validating this parameter (in run time): L.Icon.Default.prototype._getIconUrl().
The correct value should be <some_directory>/leaflet/dist/images/.
However if this bug is happening to you, it's value is: data:image/png;base64,iVBO....K5CYII=")undefined

根据所使用的捆绑程序加载器(Vanila WebPack，Angular-Cli-WebPack的超集等)，有不同的解决方案(变通方法).

There are different solutions (work around) depending on which bundle-loader you are using (Vanila WebPack, Angular-Cli - superset of WebPack, etc...).

您可以在此处看到原始问题(以及根据带式装载机的不同解决方案):
https://github.com/Leaflet/Leaflet/issues/4968

You can see the original issue here (as well as different solutions depending on your bandle-loader):
https://github.com/Leaflet/Leaflet/issues/4968

如果您使用的是Angular-Cli，则此解决方案将为您服务.在设置Maker之前，将此代码添加到某处:

If you are using Angular-Cli this solution will work for you. Add this code somewhere before setting the 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更改为资产文件夹中的有效图像).

(this code will change the broken Marker's url, to a valid image from your assets folder).

然后将此代码添加到您的angular.json(对于Angular版本> = 6.x)或您的angular-cli.json(对于Angular版本< = 5.x):

And add this code at you angular.json (for Angular version >= 6.x) or at your angular-cli.json (for Angular version <= 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可以加载它们)

(this code will copy the original Marker images to the /assets folder so angular-cli could load them)

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