vue 多张base64图片显示

可以使用Vue的v-for指令和计算属性来实现多张base64图片的显示。具体步骤如下：

1.在Vue组件中定义一个data属性，用于存储多张图片的base64字符串数组。

2.使用v-for指令遍历data属性中的图片数组，将每个base64字符串转换为图片元素。

3.使用计算属性将每个图片元素的src属性绑定到对应的base64字符串上。

下面是一个示例代码：

<template>
  <div>
    <div v-for="(img, index) in images" :key="index">
      <img :src="getImageSrc(img)" @mouseover="changeImage(index)">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...',
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...',
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...'
      ],
      currentIndex: 0
    }
  },
  methods: {
    changeImage(index) {
      this.currentIndex = index
    }
  },
  computed: {
    getImageSrc() {
      return (img) => img + `?t=${Date.now()}`
    }
  }
}
</script>

在上面的代码中，我们定义了一个data属性images，其中存储了多张图片的base64字符串数组。然后使用v-for指令遍历images数组，将每个base64字符串转换为img元素，并绑定了一个mouseover事件，用于在鼠标移入时更换图片路径。使用计算属性getImageSrc将每个图片元素的src属性绑定到对应的base64字符串上，并在末尾添加了一个随机参数，用于强制浏览器重新加载图片。