【问题标题】：React Leaflet - Marker image fails to loadReact Leaflet - 标记图像无法加载
【发布时间】：2021-11-16 11:05:19
【问题描述】：

问题

我在我的 React 项目中使用 leaflet v1.7.1 和 react-leaflet v3.0.5。

当我尝试React Router's "Setup" documentation page 中的设置示例时，标记图标变成了一个损坏的图像，如下图红色圆圈所示：

根据 React Router 的文档，标记应该是这样的：

经检查，保存标记图像的<img> 标记的src 属性应为https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon-2x.png。然而，经过检查，我的<img> 的src 属性看起来很乱：

复制

我创建了一个包含我的代码的新沙箱：

或者，按照以下步骤复制问题：

npx create-react-app leaflet-test
cd leaflet-test/
npm i leaflet react-leaflet

在代码编辑器中打开项目。转到App.js 并使用以下代码：

import React from "react";
import "./App.css";
import "leaflet/dist/leaflet.css";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

const styles = {
  mapRoot: {
    height: 400,
  },
};

export default function App() {
  return (
    <MapContainer
      style={styles.mapRoot}
      center={[51.505, -0.09]}
      zoom={13}
      scrollWheelZoom={false}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[51.505, -0.09]}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
}

npm start

我不确定我是否在 React 中错误地设置了 Leaflet，或者它是来自 Leaflet 或 React Leaflet 的错误。提前致谢！

【问题讨论】：

也许这个帖子会对你有所帮助，好消息是这不是你的错，这似乎是一个常见问题github.com/PaulLeCam/react-leaflet/issues/453
非常感谢 :D 我从那个问题线程中找到了解决方法。
没问题，很高兴您找到了解决方案 :)

标签： javascript reactjs leaflet react-leaflet

【解决方案1】：

我遇到了同样的问题，但最近发现了这个解决方案，我们需要做的就是将一个图标道具传递给标记组件。

import marker from '../../Assets/icons/Location.svg';
import { Icon } from 'leaflet'
const myIcon = new Icon({
 iconUrl: marker,
 iconSize: [32,32]
})

<MapContainer center={value} zoom={13} scrollWheelZoom={false}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={value} icon={myIcon}>
        <Popup>
        Location :{data}
        </Popup>
      </Marker>
    </MapContainer>

Check My Solution on CodeSandBox!

【讨论】：

【解决方案2】：

作为参考，这是由于 webpack 在 CSS 中重写了 URL，而 Leaflet 使用它来检测其图标图像的路径。

详情见Leaflet issue #4968。

当通过 CDN 使用 Leaflet 时，Leaflet CSS 不会被摆弄，所以它可以正常工作。

你仍然可以通过 webpack 使用它，但你应该只使用自定义图标，或者明确告诉 Leaflet 在哪里可以找到默认图标的图像：

import L from '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-defaulticon-compatibility

从 CSS 中检索所有 Leaflet 默认图标选项，尤其是所有图标图像 URL，以提高与修改 CSS 中 URL 的捆绑程序和框架的兼容性。

import 'leaflet/dist/leaflet.css';
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package
import * as L from 'leaflet';
import 'leaflet-defaulticon-compatibility';

【讨论】：

【解决方案3】：

感谢FoundingBox的评论，原来这是React Leaflet的一个bug。

已经有一个GitHub issue thread 与此错误有关，this comment 建议了以下解决方案：

好的。原来问题是由于包含传单引起的组件导入中的 CSS。

我现在刚刚包含一个指向 CDN 托管的leaflet.css 文件的链接，并且它工作正常，但如果可以修补它会很好使用 create-react-app webpack 配置。

换句话说，这是分步指南：

从App.js 中删除import "leaflet/dist/leaflet.css";。不要从任何 JS 文件中的节点模块导入 Leaflet CSS。
转到 public/index.html 并通过在 HTML 文件的 <head> 部分粘贴以下代码来包含 CDN 托管的 leaflet.css：
```
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
  integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
  crossorigin=""/>
```
（注：此链接使用的是Leaflet v1.7.1，访问Leaflet's documentation可以找到链接最新版本Leaflet的代码）

【讨论】：