vue.js - 由于加载图像缓慢，如何检测地图容器调整大小？

Question

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

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

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

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

为了看到 bug，你必须在https://c3453.csb.app/上查看渲染的应用程序（内部代码和框渲染没有显示问题）

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

Answer 1

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