vuejs：如何在组件内部预加载图像

Question

我的某个组件内部的图像在启动时未显示。 当我显示组件时，图像不会立即显示，而是已加载。

我想将我的图像预加载到根应用程序中，以便在组件处于活动状态时立即显示。

您将如何做？

Answer 1

组件仅在创建时绑定到dom。仅在dom发送请求时才会加载图像。您可以尝试

let image = new Image(); 
image.src = 'something.png'. 

这将触发网络请求。您可以使用image变量作为组件的道具

Answer 2

您也可以使用css背景图片来完成此操作。只需将此CSS添加到您的全局样式中即可：

html {
  background-image: url('url1.jpg'),
    url('url2.jpg'),
    url('url3.jpg'); // list all images here
    background-size: 0;
}

这可能有点hacky，但是所有图像都是异步预加载的。从这里开始，您可以通过更具体地应用样式来优化它，例如范围位于子组件中或您想要的任何地方。

如果您有很多图像，还可以编写一个简单的webpack插件，该插件可以动态生成此代码。