前端如何缓存图片

Question

问题描述：使用vue开发单页面引用程序，做一个类似朋友圈的项目。列表页图片较多，从列表页到详情页（通过路由），又将图片重新加载了一次，整体图片加载较慢。故，想使用缓存，进入详情页后直接获取图片，如何实现？
已使用方法：已经使用图片懒加载，图片压缩技术

Answer 1

IMG返回时，在HTTP Header中设置启用浏览器缓存，并设定缓存时间。

如果不理解，读读这篇文章 《彻底弄懂HTTP缓存机制及原理》

Answer 2

浏览器 强缓存 就好了

Answer 3

伪代码

<template>
    <ul>
        <!--假设item有至少两个属性，一个是详情id，一个是图片pic-->
        <li v-for="(item,i) in 你的图片数组" click="点我进入详情(item)">
            <!--巴拉巴拉-->
            <img :src="item.pic" />
        </li>
    </ul>
</template>
<script>
methods:{
    点我进入详情(item){
        // 详情路由自己去读params 或者你传到vuex里也行 甚至sessionStorage也行
        this.$router.push("/详情对应的路由",query:{id:item.id},params:{pic:item.pic});
    }
}
</script>