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

鹰嘴豆

我想实现的OpenStreetMap的通过传单在我JHipster应用程序并使用本地安装的单张文件。使用链接leaflet.css和leaflet.js在线文件可以正常工作。将Leaflet安装为node_module并将Leaflet导入我的应用程序是错误的。我正在将maven用于我的应用程序，并尝试从Leaflet主页重现该示例。

此方法有效：

在我的index.html的开头部分简单地包含以下几行就可以了。（这在Leaflet主页上的教程中进行了说明。）index.html

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

这种方法行不通：

node_module通过npm如下方式安装传单：

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>

根本不起作用。没有显示地图。为什么与在线文件链接一样不那么直接？

这种方法是不完整的：

按照READMEJhipster的步骤安装并node_module通过npm如下方式安装传单：

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他们说，还有几个步骤要做，但我无法找到关于这些步骤任何东西。谁能说出需要做些什么？

鹰嘴豆

该行为因将传单与webpack结合而闻名，请参阅传单＃4698。

这是为我解决的配置：

按照READMEJhipster的步骤安装并node_module通过npm如下方式安装传单：

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添加：