使用 Sapper 预加载来获取图像

问题描述

我想使用 Sapper 的 preload 函数来预加载出现在我网站主页视口中的大英雄图片。我在包含此图像的组件中尝试了以下操作：

<script context="module">

    const imageUrl = "/images/hero.jpg";

    export async function preload(page,session) {
        const res = await this.fetch(imageUrl);
        const preloadedImage = await res.blob();
        return {preloadedImage};
    }

</script>

<script>
    let preloadedImage;
    let heroImage=URL.createObjectURL(preloadedImage);
</script>

<img src={heroImage} alt="heroes" />

我得到的控制台错误是：

Uncaught (in promise) TypeError: Failed to fetch

在service-worker.js:1

是否可以使用 Sapper preload 预加载图像，如果可以，正确的方法是什么？仅供参考，在尝试 Sapper 的 <link href="images/hero.jpg" rel="preload" as="image"> 函数之前，我确实尝试在 HTML 标头中使用 preload，但在页面可见时图像仍会加载。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）