时间戳

首页 > 解决方案 > 如何在 jhipster 应用程序中正确导入传单，运行 webpack？- 标记图标丢失

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

问题描述

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

这种方法有效：

只需在我的 index.html 的 head 部分中包含以下几行就可以了。（这在 Leaflet主页上的教程中有解释。） 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>

这种方法不起作用：

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几个步骤要做，但我找不到关于这些步骤的任何信息。谁能告诉我还需要做什么？

标签： javascriptangularwebpackleafletjhipster

解决方案

该行为以将传单与 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添加：

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

推荐阅读