当前位置:网站首页>使用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>主要是下面这一句
![]()
所以如果是后台传过来的,直接按照上面的拼接即可
这种反而比文件流好用
边栏推荐
- One of the 12 balls is different from the others. Provide a balance and find it three times
- Leetcode topic analysis 3sum
- 设CPU有16根地址线,8根数据线,并用MREQ作为访存控制线号......存储器与CPU的连接
- [qnx hypervisor 2.2 user manual]6.1 using the QNX hypervisor system
- 文件的打开新建与存储
- Restore the default routing settings of the primary network card
- Basic process of code scanning login
- Leetcode topic analysis count primes
- [qnx hypervisor 2.2 user manual]5.6.1 silent device during guest shutdown
- Redis学习笔记—数据类型:有序集合(zset)
猜你喜欢
随机推荐
[qnx hypervisor 2.2 user manual]6.1 using the QNX hypervisor system
Leetcode topic analysis group anagrams
Redis学习笔记—Pipeline
一元函数求极限三大方法---洛必达法则,泰勒公式
Leetcode topic analysis 3sum
3、 System analysis and design
Redis学习笔记—数据类型:字符串(string)
如何在 FlowUs、Notion 等笔记软件中使用矩阵分析法建立你的思维脚手架
ucosii(学习笔记)
自定义标签——jsp标签基础
Redis学习笔记—持久化机制之AOF
Zone d'entrée du formulaire ionic5 et boutons radio
Jog运动模式
The sliding window of the force button "step by step" (209. sub array with the smallest length, 904. fruit basket)
4、 Database design
披萨订购设计----简单工厂模式
Leetcode topic analysis count primes
Redis学习笔记—Redis与Lua
通用分页(1)
670. Maximum Swap








