传单标记渲染但显示“损坏的图像”占位符

如何解决传单标记渲染但显示“损坏的图像”占位符

这是它的样子：

我的代码：

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 中包含了 style 和 script 标签。

解决方法

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

• 比标记图标图像更宽的一个：用于默认传单图标 shadow 图像：

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

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

有关详细信息，请参阅 Leaflet/Leaflet#4968 和 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'),});