小程序图片image标签的src如何做缓存？

我们需要自定义一个组件，实现根据src从本地缓冲中获取数据，没有缓冲就下载。

微信小程序提供了 wx.setStorage 和 wx.getStorage 来存储数据，以及 wx.saveFile 来保存文件。下面是一个适用于微信小程序的图片缓存组件：

<!-- components/cached-image/cached-image.wxml -->
<image
  src="{{imageSrc}}"
  mode="{{mode}}"
  lazy-load="{{lazyLoad}}"
  show-menu-by-longpress="{{showMenuByLongpress}}"
  binderror="onImageError"
  bindload="onImageLoad"
></image>

// components/cached-image/cached-image.js
Component({
  properties: {
    src: {
      type: String,
      observer: function(newVal) {
        this.loadImage(newVal);
      }
    },
    mode: {
      type: String,
      value: 'aspectFill'
    },
    lazyLoad: {
      type: Boolean,
      value: false
    },
    showMenuByLongpress: {
      type: Boolean,
      value: false
    }
  },

  data: {
    imageSrc: ''
  },

  methods: {
    async loadImage(url) {
      if (!url) return;

      try {
        // 检查缓存
        const cachedPath = await this.getCachedImage(url);
        if (cachedPath) {
          this.setData({ imageSrc: cachedPath });
          return;
        }

        // 下载并缓存图片
        const downloadRes = await this.downloadImage(url);
        const savedFilePath = await this.saveFile(downloadRes.tempFilePath);
      ...

点击查看剩余70%