uni-app 实现image加载图片的占位图，错误图显示，以及图片的缓存

在uni-app中，可以通过设置图片的占位图、错误图以及利用缓存机制来优化图片加载体验。以下是一个示例代码，展示了如何实现这些功能。

1. 设置占位图和错误图

首先，在template中定义一个<image>组件，并使用v-if和v-else来控制图片的显示状态。我们还需要定义几个数据属性来存储图片状态。

<template>
  <view>
    <image
      v-if="imageLoaded"
      :src="imageUrl"
      @error="onImageError"
      @load="onImageLoad"
      :style="{ width: '100%', height: 'auto' }"
    />
    <image
      v-else-if="imageError"
      :src="errorImageUrl"
      :style="{ width: '100%', height: 'auto' }"
    />
    <image
      v-else
      :src="placeholderImageUrl"
      :style="{ width: '100%', height: 'auto' }"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg', // 实际图片URL
      placeholderImageUrl: '/static/placeholder.png', // 占位图URL
      errorImageUrl: '/static/error.png', // 错误图URL
      imageLoaded: false,
      imageError: false,
    };
  },
  methods: {
    onImageLoad() {
      this.imageLoaded = true;
      this.imageError = false;
    },
    onImageError() {
      this.imageLoaded = false;
      this.imageError = true;
    },
  },
};
</script>

2. 图片缓存

在uni-app中，图片缓存通常是由浏览器或小程序框架自动管理的。但你可以通过一些策略来优化缓存使用，比如利用本地存储来缓存图片数据。不过，对于直接显示的图片URL，浏览器通常已经做了很好的缓存管理。

如果你确实需要手动控制缓存（例如预加载图片），可以使用uni.getImageInfo结合canvas来绘制图片，然后将其转换为base64编码存储到本地。但这种方法通常用于需要频繁操作图片数据的情况，对于简单显示并不推荐。

以下是一个预加载图片并转换为base64的示例（不推荐用于简单显示场景，仅作参考）：

uni.getImageInfo({
  src: 'https://example.com/image.jpg',
  success: (res) => {
    const canvasId = 'myCanvas';
    const ctx = uni.createCanvasContext(canvasId);
    ctx.drawImage(res.path, 0, 0, res.width, res.height);
    ctx.draw(false, () => {
      uni.canvasToTempFilePath({
        canvasId,
        success: (tempRes) => {
          uni.getFileSystemManager().readFile({
            filePath: tempRes.tempFilePath,
            encoding: 'base64',
            success: (data) => {
              // 存储base64数据到本地或进行其他操作
              console.log(data.data);
            },
          });
        },
      });
    });
  },
});

注意，上述代码示例主要用于演示如何操作图片数据，并不适合直接用于图片加载的占位图、错误图显示和缓存管理场景。