当前位置:网站首页>使用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>主要是下面这一句
![]()
所以如果是后台传过来的,直接按照上面的拼接即可
这种反而比文件流好用
边栏推荐
- Redis learning notes - data type: Set
- 438. Find All Anagrams in a String
- 3、 System analysis and design
- Batch generation of code128- C barcode
- 636. Exclusive Time of Functions
- Cookie和Session入门
- 力扣之滑动窗口《循序渐进》(209.长度最小的子数组、904. 水果成篮)
- 玩转NanoPi 2 裸机教程编程-01点亮User LED难点解析
- H-index of leetcode topic analysis
- Kotlin Series 1: getting started with basics
猜你喜欢

ionic5表单输入框和单选按钮
Redis学习笔记—发布订阅

JS mask important data of ID card and mobile phone number with * *

Flink error --caused by: org apache. calcite. sql. parser. SqlParseException: Encountered “time“

ionic5錶單輸入框和單選按鈕

三层架构与SSM之间的对应关系

设CPU有16根地址线,8根数据线,并用MREQ作为访存控制线号......存储器与CPU的连接

简易学生管理

Quartz Crystal Drive Level Calculation

多线程初学
随机推荐
Redis学习笔记—单个键管理
Redis learning notes - data type: Set
A method of realizing video call and interactive live broadcast in small programs
如何在 FlowUs、Notion 等笔记软件中使用「番茄工作法」?
通用分页(1)
Redis learning notes - single key management
Node request module cookie usage
Isomorphic strings for leetcode topic resolution
'coach, I want to play basketball!'—— AI Learning Series booklet for system students
Quartz Crystal Drive Level Calculation
New engine, new capability, new experience, Tencent host security flagship release
嵌入式系统概述(学习笔记)
3、 System analysis and design
2022-06-22:golang选择题,以下golang代码输出什么?A:3;B:1;C:4;D:编译失败。
位绑定
【云原生 | Kubernetes篇】Kubernetes原理与安装(二)
Redis learning notes - Database Management
Leetcode topic analysis 3sum closest
Structure binary tree from inorder and postorder traversal for leetcode topic analysis
Redis学习笔记—数据类型:字符串(string)