在客户端通过javascript显示图像答案

【问题标题】：Display the image through javascript on client side在客户端通过javascript显示图像
【发布时间】：2018-02-06 10:29:17
【问题描述】：

我正在建立一个网站，我必须在页面上多次显示用户的个人资料图片，例如 10 到 15 次。个人资料图片大小为 80Kb，它是从 url 获取的（我的服务器上不存在）。多次显示它会增加浏览器请求，从而增加页面大小。是否有任何方法可以通过客户端的javascript显示图像，以便图像只下载一次并保存到某个变量以多次显示。或者，如果您知道一些更好的选择，我们将不胜感激。非常感谢。

【问题讨论】：

你目前如何显示图片
@AnandSiddharth 目前通过 echo 并使用 img src 标签在 php 中显示其 url
@zish 。直到现在你已经尝试过。请分享您的代码并尝试提供 jsfiddle。
@zish 如果所有 img 标签的 url 保持不变（即，无论您在网页中多次使用相同的资源 url 放置图像的任何位置），则浏览器不会再次请求相同的资源，并且再次，它为当前会话缓存。您无需担心。

标签： javascript php jquery caching

【解决方案1】：

请参考此链接

https://www.ibm.com/developerworks/community/blogs/bobleah/entry/html5_code_example_store_images_using_localstorage57?lang=en

注销后可以清空存储

<script>
      var hero;

      if ( localStorage.getItem('heroImg')) {
        hero = localStorage.getItem('heroImg');
      }
      else {
        hero = '/9j/4AAQSkZJRgABAgAAZABkAAD/7    /.../    6p+3dIR//9k=';
        localStorage.setItem('heroImg',hero);
      }

      document.getElementById("hero-graphic").src='data:image/png;base64,' + hero;
    </script> 


    <img id="hero-graphic" alt="Blog Hero Image" src="" />

这里hero = '/9j/4AAQSkZJRgABAgAAZABkAAD/7 /.../ 6p+3dIR//9k=';你可以通过ajax获取你的头像链接

【讨论】：