問題描述

傳單有問題.

在開發(fā)中一切正常，但在生產(chǎn)中，我的應(yīng)用無法找到 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 文件中包含這樣的內(nèi)容

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中的一個(gè)已知bug，根本問題是Leaflet的圖標(biāo)圖像位置在捆綁過程中被錯(cuò)誤引用.

您可以驗(yàn)證這是您的問題，購買驗(yàn)證此參數(shù)(在運(yùn)行時(shí)):L.Icon.Default.prototype._getIconUrl().
正確的值應(yīng)該是 <some_directory>/leaflet/dist/images/.
但是，如果您遇到此錯(cuò)誤，則其值為: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

根據(jù)您使用的捆綁加載器(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，此解決方案將適合您.在設(shè)置 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;

(此代碼會(huì)將損壞的 Marker 的 url 更改為資產(chǎn)文件夾中的有效圖像).

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

并將此代碼添加到您的 angular.json(對(duì)于 Angular 版本 >= 6.x)或您的 angular-cli.json(對(duì)于 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/"
   }
] ...

(此代碼會(huì)將原始標(biāo)記圖像復(fù)制到 /assets 文件夾，以便 angular-cli 可以加載它們)

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

這篇關(guān)于未找到傳單標(biāo)記生產(chǎn)環(huán)境的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！