未找到传单标记生产环境

2022-01-12 00:00:00 ruby-on-rails leaflet javascript erb

传单有问题.

在开发中一切正常，但在生产中，我的应用无法找到 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

Leaflet 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中的一个已知bug，根本问题是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...).

您可以在此处查看原始问题(以及不同的解决方案，具体取决于您的 bandle-loader):
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;

(此代码会将损坏的 Marker 的 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)

相关文章