传单标记渲染但显示 "broken image" 占位符

Question

这是它的样子：

我的代码：

Map.js

//the next 3 lines changes nothing kept it in bc I found this online as a potential solution
//and didn't want to get this suggested
import L from 'leaflet';
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.imagePath = "/";

function Map() {

 let position = [x, y];

 return (
   <div>
     <div id="mapid">
       <MapContainer className="leaflet" center={position} zoom={13} scrollWheelZoom={true}>
         <TileLayer
           attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
          <Marker position={position}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </MapContainer>
      </div>
    </div>

  );
};

index.css

.leaflet {
  height: 500px;
  width: 100%;
}

#mapid {
  height: 500px;
  margin-top: 50px;
  margin-bottom: 150px;
}

img.leaflet-marker-icon {
   background-image: 
   url('<url>');
}

我不太明白标记是如何同时渲染和不渲染的，这没有意义。

显然，我正在尝试渲染导致某些图像无法渲染的内容，但我不知道它会是什么。

代码几乎直接来自示例代码：https://leafletjs.com/examples/quick-start/。这就是我困惑的原因。

我已经在 index.html 中添加了样式和脚本标签。

Answer 1

如果您非常仔细，您的屏幕截图中实际上有 2 个损坏的图像占位符：

一个比标记图标图像宽的：这是默认的传单图标阴影图像：

另一个更难辨别，它适合显示的图标图像大小：这是在 <img> 的 src 属性中指定的实际默认 Leaflet 蓝色图标图像标签。但是我们可以看到一个蓝色的图标，因为你已经将它指定为背景图像（但它仍然坏了，因此浏览器仍然显示占位符）

根本原因是您的构建引擎（很可能是 webpack，因为您使用的是 React）重写了 Leaflet CSS 文件中的 URL，这干扰了 Leaflet 如何使用它来检测图像的路径。

有关详细信息，请参阅 Leaflet/Leaflet#4968 and PaulLeCam/react-leaflet#453。

至于解决方法，您有 2 个可能的简单选项：

使用我的 leaflet-defaulticon-compatibility 插件

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';

在项目的某处使用此代码片段（您可能需要正确配置 webpack 加载器）：

import 'leaflet/dist/leaflet.css';
import * as 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'),
});

传单标记渲染但显示 "broken image" 占位符

Leaflet marker rendering but showing the "broken image" placeholder

leaflet

reactjs

react-leaflet