当前位置:网站首页>使用base64,展示图片

使用base64,展示图片

2022-06-23 09:09:00 Crazy_GirlLL

使用base64和img标签组合出来的是这个样子

<img src=“data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFU”/>

所以代码是:

<template>
  <div class="communityPage"
       v-loading="loading">
    <div class="formTitle">
      图片查看
    </div>
    <img style="width:100%;"
         :src="imgSrc"
         alt="">
  </div>
</template>
  <script>
import { ViewOriginalImg } from '@/api/index'
export default {
  name: 'viewImg',
  data() {
    return {
      loading: false,
      imgSrc: '',
    }
  },
  created() {
    this.loading = true
    this.ViewOriginalImg(this.$route.query.id, this.$route.query.type)
  },
  methods: {
    ViewOriginalImg(id, type) {
        //type为图片的后缀
      ViewOriginalImg(this.getStore('currentCommunityId'), id).then((res) => {
        if (res.code == 200) {
          this.imgSrc = 'data:image/' + type + ';base64,' + res.data
        } else {
          this.$message(res.message)
        }
        this.loading = false
      })
    },
  },
}
</script>
<style scoped>
@import '../../../assets/css/community.css';
</style>

主要是下面这一句

所以如果是后台传过来的,直接按照上面的拼接即可

这种反而比文件流好用

原网站

版权声明
本文为[Crazy_GirlLL]所创,转载请带上原文链接,感谢
https://blog.csdn.net/Crazy_GirlLL/article/details/113995567