是否可以从 vuex Store 延迟加载 B64 图像？

Question

我有一个带有 12 个 img 标签的 vue 模板

<img
    :src="item.logo"
    onerror="this.style.visibility='hidden'"
/>

img 标签在循环内。

item.logo 的值例如：

"data:image/svg+xml;base64,PHN2ZyBpZD0iRWJlbmVfMSIgZGF0YS1uYW1lPSJFYmVuZSAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDIuNzYgNTYuODMiPjxkZWZzPjxzdHlsZT4uY2xzLTEsLmNscy0yLC5jbHMtM3tmaWxsOiNmZmY7fS5jbHMtMXtvcGFjaXR5OjAuNjt9LmNscy0ze29wYWNpdHk6MC41OTt9LmNscy00e2ZpbGw6I2EyMWMyNjt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmxvZ28td25kLXR2LWluZm88L3RpdGxlPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iMjYuODEiIHk9IjAuMTQiIHdpZHRoPSIxMTUuOTUiIGhlaWdodD0iNTYuNjkiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik04Ni44OSw3OS40OWgtNS43VjU0LjQxaDUuN1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zOS4wMSAtMzcuO"

我没有把b64的全部内容放在这里，只知道它是一个base64编码的SVG。 SVG 显示正确。

我的问题是页面渲染很长，因为我使用的设备很慢。 但是，当我通过指向托管 SVG 的 URI 修改 item.logo 值时，页面会快速呈现而不会立即显示 svg，从而允许用户在徽标加载时与页面交互（延迟加载？）

我的问题： 如果这些图像以 b64 格式存储在 Vuex 存储中，是否有可能对这些图像进行某种异步加载？因此，在加载图像时，用户仍然可以与页面进行交互。

Answer 1

用于在应用程序中延迟加载图像的 Vue 模块：https://www.npmjs.com/package/vue-lazyload。

看起来这是你需要的。