vue后台返回base64图片无法显示的解决
作者：Zxiuping 发布时间：2024-05-09 15:21:11
标签：vue,base64,图片
vue后台返回base64图片无法显示
关于后台接口返回的图片base64格式页面无法显示的问题，我遇到的原因是因为返回的一串内容里面存在空格或者换行的原因
解决方法如下
let str = `data:image/jpg;base64,${res.imgStr}`
? ? ? ? this.mpId = str.replace(/[\r\n]/g, '')
let str = `data:image/jpg;base64,${res.imgStr}`
this.mpId = str.replace(/[\r\n]/g, '')
这样界面就能显示图片啦。
vue中base64转图片格式
// 拍照获取图片base64
// imgsrc: base64图片资源
refreshDataList (imgsrc) {
let data = this.baseImg(imgsrc)
console.log(data)
},
// base64转图片资源
baseImg (dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], {type: mime})
},
来源：https://blog.csdn.net/Zxiuping/article/details/122232664
0
投稿猜你喜欢
1.前言开发中，[]byte类型和string类型需要互相转换的场景并不少见，直接的想法是像下面这样进行强制类型转换：a := "- 远程登录控制台Scrapy附带一个内置的telnet控制台，用于检查和控制Scrapy运行过程。telnet控制台只是一个运行在scrapp
- 前言在Django的模型字段参数中，有一个参数叫做validators，这个参数是用来指定当前字段需要使用的验证器，也就是对字段数据的合法性
- 首先学习两个函数1.substring 返回字符、binary、text 或 image 表达式的一部分。基本语法:SUBSTR
- 1、冒泡排序它反复访问要排序的元素列，并依次比较两个相邻的元素。如果顺序(如从大到小)错了，就交换它们。访问元素的工作是反复进行，直到没有相
- 【OpenCV】⚠️高手勿入! 半小时学会基本操作 ⚠️ 圆圈检测概述OpenCV 是一个跨平台的计算机视觉库, 支持多语言, 功能强大.
- 本文主要介绍了IDEA配置连接MYSQL数据库遇到Failed这个问题解决，分享给大家，具体如下： &nb
- 环境：python3 + unittest + requestsExcel管理测试用例，HTMLTestRunner生成测试报告测试完成后邮
- 在学习asyncio之前，先理清楚同步/异步的概念：同步是指完成事务的逻辑，先执行第一个事务，如果阻塞了，会一直等待，直到这个事务完成，再执
- 使用 os 模块判断文件是否存在os.path.isfile(path)判断目录是否存在os.path.isdir(path)判断路径是否存
- 1、函数介绍REGEXP_LIKE 函数在功能上与 LIKE 函数非常相似。 然而，虽然 LIKE 允许简单的字符串匹配搜索，但 REGEX
- SOA 服务用消息进行通信，该消息通常使用XML Schema来定义（也叫做XSD， XML Schema Definition）。消费者和
- 码农在囧途最近这段时间来经历了太多东西，无论是个人的压力还是个人和团队失误所带来的损失，都太多，被骂了很多，也被检讨，甚至一些不方便说的东西
- 本文实例讲述了python函数局部变量用法。分享给大家供大家参考。具体分析如下：当你在函数定义内声明变量的时候，它们与函数外具有相同名称的其
- 本文介绍了vue语法之拼接字符串的示例代码，分享给大家，具体如下。先来一行代码：<div class="swiper-sli
- 本文实例讲述了python实现linux下使用xcopy的方法。分享给大家供大家参考。具体如下：这个python函数模仿windows下的x
- 方法一（不使用模块，by agonyr）#!/usr/bin/perl -wuse strict;my @seq = ( "A&q
- 1.什么是解构？ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。它在语法上比ES5所提供的更加简洁、紧凑、清晰。
- 前言Redis是一个开源的内存数据库，在项目开发中redis的使用也比较频繁，本文介绍了Go语言中go-redis库的基本使用。感兴趣的小伙
- 本文实例讲述了java使用正则表达式判断邮箱格式是否正确的方法。分享给大家供大家参考。具体如下：import java.io.*;publi
