使用JavaScript重新获取<img>时，从浏览器缓存中提供图片

Question

我在从浏览器缓存中获取图片时遇到问题。

简单方案：

• DOM使用<img>标签下载图像
• 不能在浏览器缓存中使用fetch()上的img.src

示例：https://fetch-img-from-cache.netlify.com

在此示例中，我让Netlify使用其默认标头，并将Cache-Control设置为public, max-age=0, must-revalidate。以我的理解，这只会导致条件获取，并且响应为304（未修改），使浏览器可以使用缓存的图像。 （可以解释为：better-living-through-caching）

外观如下：

    <main>
        <div id="images">
            <img id="samplePhoto" src="assets/340_AppleiPhoneXSMax_IMG_E7156.jpg">
        </div>
    </main>
    <script type="text/javascript">
        document.querySelector('#samplePhoto').addEventListener('load', fetchImgFromCache);

        function fetchImgFromCache(e) {
            const img = e.target;

            fetch(e.target.src) // Failing to hit cache
                .then(....)