当前位置:网站首页>使用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>主要是下面这一句
![]()
所以如果是后台传过来的,直接按照上面的拼接即可
这种反而比文件流好用
边栏推荐
- “教练,我想打篮球“ —— 给做系统的同学们准备的 AI 学习系列小册
- Happy number of leetcode topic analysis
- Use of type dependent names must be prefixed with 'typename'
- 学习SCI论文绘制技巧(E)
- Structure binary tree from inorder and postorder traversal for leetcode topic analysis
- 528. Random Pick with Weight
- Jog运动模式
- Community article | mosn building subset optimization ideas sharing
- Zone d'entrée du formulaire ionic5 et boutons radio
- ucosii(学习笔记)
猜你喜欢

JSP入门总结

Simple student management
Redis learning notes - data type: string (string)

点击添加下拉框

173. Binary Search Tree Iterator

986. Interval List Intersections

Aiming at the overseas pet market, "grasshand" has developed an intelligent tracking product independent of mobile phones | early project
Redis learning notes - slow query analysis
【NanoPi2试用体验】裸机第一步

设CPU有16根地址线,8根数据线,并用MREQ作为访存控制线号......存储器与CPU的连接
随机推荐
Flink错误--Caused by: org.apache.calcite.sql.parser.SqlParseException: Encountered “time“
Redis learning notes - data type: Set
36氪首发|云原生数据库公司「拓数派」完成新一轮战略融资,估值已达准独角兽级别
Which is better, semrush or ahrefs? Which is more suitable for GoogleSEO keyword analysis
线性表(SequenceList)的顺序表示与实现----线性结构
S5P4418裸机编程的实现(替换2ndboot)
学习SCI论文绘制技巧(F)
ionic5錶單輸入框和單選按鈕
Happy number of leetcode topic analysis
Isomorphic strings for leetcode topic resolution
Redis learning notes - data type: string (string)
[qnx hypervisor 2.2 user manual]6.2 network
Batch generation of code128- C barcode
An idea of using keep alive to cache data in vue3 form pages
How thingjs enables low threshold 3D visualization development
Learn SCI thesis drawing skills (E)
Restore the default routing settings of the primary network card
披萨订购设计----简单工厂模式
Redis学习笔记—持久化机制之RDB
Redis学习笔记—数据库管理