Javascript Angular 10-传单-到marker-icon.png的网页拆分URL

这是关于网页和传单之间的兼容性问题。正如您可能已经知道的，（，）传单以一种与webpack不兼容的方式操纵其指向图像的URL。如果不固定，它们会生成无意义的URL，如

http://localhost:8000/static/frontend/marker-icon.2b3e1faf89f94a483539.png%22）marker icon.png

与

http://localhost:8000/static/frontend/marker-图标2b3e1faf89f94a483539.png

。我可以在我的开发环境中使用一些解决方案来解决这个问题，但不能在我的prod构建中解决

我有一个单独的组件，除了构建一个传单地图，它什么也不做。我试过给出的答案，我试过插件，我的构建中没有标记

我该怎么办？我犯了什么错

我的设置

通常，我寻求在django后端服务器上部署angular。“/api”下的所有URL都属于后端api，“/frontend”下的所有URL都属于我的前端

传单导入my

angular.json

，但仅导入其js文件

//angular.json
...
            "styles": [
              "src/styles.scss",
              "node_modules/font-awesome/css/font-awesome.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/popper.js/dist/umd/popper.js",
              "node_modules/leaflet/dist/leaflet.js",
              "node_modules/tinymce/tinymce.min.js"
            ]
...

旁注：我目前没有使用ngx传单，因为我看不到使用的理由。不过，我确实阅读了使用ngx传单的修复程序，因为据我所知，问题在于一般的网页传单交互

在我的组件中，我使用

import*作为L从“节点\模块/传单”导入传单

及其标记类，特别是从“传单”导入{Marker}。 使用下面的任何修复程序，我都不会在

ngserve

上获得标记，但不会在

ngbuild--prod

中获得标记

现在来看看每个解决方案的结果。我研究了使用

ngserve

和

ngbuild--prod

的每个解决方案，后者是我在django后端服务器的开发环境中运行的。Bar solution 3他们总是有相同的结果：

1。使用

这将标准标记的url更改为“未定义”： 标记根本没有加载

这导致URL的某些部分被对象替换：

prod中的行为相同。标记确实加载了，您可以看到带有“未找到文件”符号的图像所在位置的轮廓

（ngx传单自述中也有建议）

在ng发球时：标记本身是可见的。从错误的url加载marker-shadow.png失败，名称中没有必要的哈希：

在ng build上--prod:具有marker_图标和marker_阴影的无意义URL：

---

这既不是一个干净的解决方案，也不是一个真正解决问题的方案，它只是绕过了问题

最后，您要做的是加载这两个图像文件。这些应该来自分发前端的HTTP服务器，但这正是传单正在分发的内容。没有什么能阻止您从不同的地方加载这两个映像文件，比如为后端服务的HTTP服务器

因此，我将这两个图像文件上传到我的后端服务器，然后将传单的Marker原型的DefaultIcon替换为URL指向我的后端服务器的图标。那帮我修好了

let DefaultIcon = L.icon({
  iconUrl: `${Constants.wikiMediaUrl}/leaflet/marker-icon.png`,
  shadowUrl: `${Constants.wikiMediaUrl}/leaflet/marker-shadow.png`,
  iconSize: [24,36],
  iconAnchor: [12,36]
});

L.Marker.prototype.options.icon = DefaultIcon;

//leaflet-map.component.ts
import { Marker } from 'leaflet';
import * as L from "node_modules/leaflet";

delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

//leaflet-map.component.ts
import { Marker } from 'leaflet';
import * as L from "node_modules/leaflet";

...
  //My function to create markers on my map
  createDefaultMarker(mapMarker: MapMarker): Marker{
    return L.marker([mapMarker.latitude, mapMarker.longitude], {
      iconSize: [ 25, 41 ],
      iconAnchor: [ 13, 41 ],
      iconUrl: 'assets/marker-icon.png',
      shadowUrl: 'assets/marker-shadow.png'
    })

//angular.json
...
            "assets": [
              "src/favicon.ico",
              "src/assets",
              { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" },
              { "glob": "**/*", "input": "node_modules/leaflet/dist/images", "output": "assets/"}
            ],
...

let DefaultIcon = L.icon({
  iconUrl: `${Constants.wikiMediaUrl}/leaflet/marker-icon.png`,
  shadowUrl: `${Constants.wikiMediaUrl}/leaflet/marker-shadow.png`,
  iconSize: [24,36],
  iconAnchor: [12,36]
});

L.Marker.prototype.options.icon = DefaultIcon;