Reactjs 传单标记呈现，但显示；“破碎图像”；占位符

下面是它的外观：

我的代码：

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>

  );
};

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

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

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

//接下来的3行内容没有任何变化，将其保留在bc中。我在线发现这是一个潜在的解决方案
//我不想让人建议这个
从“传单”进口L；
删除L.Icon.Default.prototype.\u getIconUrl；
L.Icon.Default.imagePath=“/”；
函数映射（）{
设位置=[x，y]；
返回(
一个漂亮的CSS3弹出窗口。
可轻松定制。
);
};

index.css

//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>

  );
};

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

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

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

。传单{
高度：500px；
宽度：100%；
}
#mapid{
高度：500px；
边缘顶部：50px；
边缘底部：150px；
}
img.传单标记图标{
背景图像：
url（“”）；
}

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

显然，我正在尝试渲染一些导致某些图像无法渲染的东西，但我看不出它是哪个

代码与示例代码非常接近：。这就是为什么我感到困惑

---

我已经在index.html中包含了样式和脚本标记。

如果你真的密切关注，你的屏幕截图中会显示2个损坏的图像占位符：

• 比标记图标图像宽的图像：即默认传单图标阴影图像：

• 另一个更难识别，它适合显示的图标图像大小：即在
  标记的

  src

  属性中指定的实际默认传单蓝色图标图像。但我们可以看到一个蓝色图标，因为您已将其指定为背景图像（但它仍然损坏，因此浏览器仍显示占位符）

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

有关更多详细信息，请参阅和

至于解决办法，您有两种可能的简单选择：

• 使用我的插件

导入“传单/目录/传单.css”；
导入“传单默认图标兼容性/dist/传单默认图标兼容性.webpack.css”；//重新使用~传单包装中的图像
从“传单”中输入*作为L；
导入“传单默认图标兼容性”；

• 在项目中的某个地方使用此代码段（您可能需要正确配置Web包加载程序）：

导入“传单/目录/传单.css”；
从“传单”中输入*作为L；
删除L.Icon.Default.prototype.\u getIconUrl；
L.Icon.Default.mergeOptions({
iconRetinaUrl:require（'传单/dist/images/marker-icon-2x.png'），
iconUrl:require（'传单/dist/images/marker-icon.png'），
shadowUrl:require（'slipal/dist/images/marker shadow.png'），
});