如何在 jhipster 应用程序中正确导入传单，运行 webpack？ - 标记图标丢失

Question

我正在尝试通过 Leaflet 在我的 JHipster 应用程序中实现 OpenStreetMap 并使用本地安装的传单文件。使用 link 到 leaflet.css 和 leaflet.js 在线文件工作正常。将传单安装为 node_module 并将传单导入我的应用程序是错误的。我正在为我的应用程序使用 Maven 并尝试从 Leaflet homepage.

中重现示例

这种方法有效：

只需在我的 index.html 的头部部分包含以下几行就可以了。（这在 Leaflet homepage 的教程中有解释。） index.html

<head>
...
<link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="crossorigin=""></script>
...
</head>

这种方法不起作用：

通过 npm 安装传单 node_module，例如：

npm install --save --save-exact leaflet
npm install --save-dev --save-exact @types/leaflet

随后，将本地安装的模块包含在我的 index.html 文件的头部部分

<head>
...
<link rel="stylesheet" href="../../../node_modules/leaflet/dist/leaflet.css">
<script src="../../../node_modules/leaflet/dist/leaflet.js"></script>
...
</head>

根本不起作用。不显示地图。为什么不像在线文件 link 那样直截了当？

此方法不完整：

跟随 Jhipster 的 README 并通过 npm 安装传单 node_module，例如：

npm install --save --save-exact leaflet
npm install --save-dev --save-exact @types/leaflet

然后添加以下行以导入 leaflet.js 和 leaflet.css。在 src/main/webapp/app/vendor.ts 添加：

import 'leaflet/dist/leaflet.js';

并在 src/main/webapp/content/css/vendor.css 添加：

@import '~leaflet/dist/leaflet.css';

这会给我显示地图但是标记图标显示为损坏的图像。在 README 中，他们说还有一些步骤要做，但我找不到关于这些步骤的任何信息。谁能告诉我还需要做什么？

Answer 1

该行为因将 leaflet 与 webpack 结合使用而闻名，请参阅 Leaflet issue #4698。

这是帮我解决的配置：

跟随 Jhipster 的 README 并通过 npm 安装传单 node_module 就像：

npm install --save --save-exact leaflet
npm install --save-dev --save-exact @types/leaflet

然后添加以下行以导入 leaflet.js 和 leaflet.css，并明确指定默认图标图像资源。在 src/main/webapp/app/vendor.ts 添加：

import 'leaflet/dist/leaflet.js';
declare let L;
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'),
});

并在 src/main/webapp/content/css/vendor.css 添加：

@import '~leaflet/dist/leaflet.css';

如何在 jhipster 应用程序中正确导入传单，运行 webpack？ - 标记图标丢失

How to correctly import leaflet in jhipster app, running webpack? - marker-icon missing

javascript

leaflet

jhipster

webpack

angular

这种方法有效：

这种方法不起作用：

此方法不完整：