問題描述

傳單有問題.

在開發中一切正常，但在生產中，我的應用無法找到 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"  />

如果有人可以幫忙！

推薦答案

這是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)

這篇關于未找到傳單標記生產環境的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！