如何检测由于加载图像缓慢而调整地图容器的大小？

如何解决如何检测由于加载图像缓慢而调整地图容器的大小？

我正在使用 Vue2Leaflet 插件在 Nuxt 中创建一个带有 Leaflet 地图的应用。

我遇到了一个问题：我正在使用 Bootstrap 列来调整地图和随附图像的大小，但是图像加载速度太慢（目前无法解决），因此在映射时容器的大小不正确加载。

这会导致地图呈半灰色。我曾尝试在挂载的事件中调用 map.invalidateSize()，但即使这样也必须在图像加载完成之前发生。

我在以下位置设置了一个沙箱：https://codesandbox.io/s/eager-bohr-c3453?file=/src/App.vue

要查看错误，您必须在 https://c3453.csb.app/ 处查看渲染的应用程序（内部代码和框渲染未显示问题）

我想我需要一些方法来等待图像完成加载（所以 BS col 是正确的大小），然后调用 map.invalidateSize()，但我不确定如何...

解决方法

您可以在 onload 上附加 <img> 侦听器，以便您可以（再次？）调用 Leaflet 地图 invalidateSize() 方法。