如何检测由于加载图像缓慢而导致的地图容器大小调整？
How to detect map container resize due to slow loading image?
我正在使用 Vue2Leaflet 插件在 Nuxt 中创建一个带有 Leaflet 地图的应用程序。
不过我遇到了一个问题：我正在使用 Bootstrap 列来调整地图和随附图像的大小，但是图像加载速度太慢（目前无法解决），所以容器不是地图加载时的正确大小。
这会导致地图呈半灰色。我试图在挂载事件中调用 map.invalidateSize()，但即便如此，也必须在图像完成加载之前发生。
我在以下位置设置了一个沙箱：https://codesandbox.io/s/eager-bohr-c3453?file=/src/App.vue
为了查看错误，您必须在 https://c3453.csb.app/ 查看呈现的应用程序（内部 codesandbox 呈现不显示问题）
我想我需要一些方法来等到图像完成加载（所以 BS col 是合适的大小），然后调用 map.invalidateSize()，但我不确定如何...
您可以在 <img> 上附加一个 onload 侦听器，这样您就可以（再次？）调用 Leaflet 地图 invalidateSize() 方法。
我正在使用 Vue2Leaflet 插件在 Nuxt 中创建一个带有 Leaflet 地图的应用程序。
不过我遇到了一个问题：我正在使用 Bootstrap 列来调整地图和随附图像的大小，但是图像加载速度太慢（目前无法解决），所以容器不是地图加载时的正确大小。
这会导致地图呈半灰色。我试图在挂载事件中调用 map.invalidateSize()，但即便如此，也必须在图像完成加载之前发生。
我在以下位置设置了一个沙箱：https://codesandbox.io/s/eager-bohr-c3453?file=/src/App.vue
为了查看错误，您必须在 https://c3453.csb.app/ 查看呈现的应用程序（内部 codesandbox 呈现不显示问题）
我想我需要一些方法来等到图像完成加载（所以 BS col 是合适的大小），然后调用 map.invalidateSize()，但我不确定如何...
您可以在 <img> 上附加一个 onload 侦听器，这样您就可以（再次？）调用 Leaflet 地图 invalidateSize() 方法。