将base64字符串显示为图像vue.js

<template>
  <div>
    <img :src="imageUrl" alt="Image">
  </div>
</template>

<script>
export default {
  props: {
    base64String: {
      type: String,
      required: true
    }
  },
  computed: {
    imageUrl() {
      return `data:image/jpeg;base64,${this.base64String}`;
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要进行自定义 */
img {
  max-width: 100%;
  height: auto;
}
</style>

<template>
  <div>
    <image-display :base64String="base64Image"></image-display>
  </div>
</template>

<script>
import ImageDisplay from './ImageDisplay.vue';

export default {
  components: {
    ImageDisplay
  },
  data() {
    return {
      base64Image: 'base64字符串'
    };
  }
};
</script>