vue后台返回base64图片无法显示的解决

目录
  • vue后台返回base64图片无法显示
    • 解决方法如下
  • 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})
    },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue实现base64编码图片间的切换功能

    Vue实现base64编码图片间的切换功能

    前言 昨天在项目开发中遇到了一个需要展示多张图片到一个容器中的需求,每张图片在鼠标移入时都要更换图片路径,展示一个新的图片,由于每张图片大小都在2~6kb之间,webpack中配置了图片在10kb以内自动转换base64,所有就有了本篇文章的分享.先给大家展示下最后要实现的效果 实现思路 给每个元素添加@mouserover事件和@mouseleave事件 绑定函数,传用于识别当前参数的标识 根据所传参数判断当前状态下应该显示什么图片 解析渲染 实现过程 从json文件中读取图片信息集合,循环渲

  • vue 图片转base64本地路径跨域方式

    vue 图片转base64本地路径跨域方式

    目录 图片转base64本地路径跨域 问题描述 解决方案 图片转成base64跨域等安全限制及解决 图片转base64本地路径跨域 问题描述 代码 getUrlBase64(url, ext, callback) { var canvas = document.createElement("canvas"); //创建canvas DOM元素 var ctx = canvas.getContext("2d"); var img = new Image; img.cr

  • Vue 设置图片不转为base64的方式

    Vue 设置图片不转为base64的方式

    目录 Vue设置图片不转为base64 vue-cli 3 .vue-cli 4  版本 vue-cli 2 版本 Vue项目base64转img 输入框 效果展示 Vue设置图片不转为base64 在使用 Vue.js 框架开发项目时,vue-cli创建的webpack模板默认会将10K以下的图片和字体文件转为base64. 好处:带来了更快的渲染,不会因为页面切换时还有加载图片的延迟感. 坏处:打包后的CSS,JS文件非常大,特别是图片数量多的情况下,这个问题尤为明显. vue-cli 3

  • vue 通过base64实现图片下载功能

    1. 使用场景 当我们处理图片下载功能的时候,如果本地的图片,那么是可以通过canvas获得图片的base64的,方法如下.但是如果图片的url存在跨域问题的话,下面的方法将行不通,这时候我们可以另辟蹊径,将后台的同学,将图片以base64的形式进行返回. function getBase64(url){ //通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 createElement() 创建 <img> 省去了 append(),也就避免了文档冗余和污染 va

  • Vue结合ElementUI上传Base64编码后的图片实例

    目录 ElementUI上传Base64编码后的图片 安装ElementUI 按需引入(当然如果需要你也可以全部引入) 上传实现 ElementUI把上传的图片转为Base64 ElementUI上传Base64编码后的图片 自我认为ElementUI还是一个很不错的写手机端的组件,所以这次做小项目的时候就用了ElementUI的Upload组件来实现图片的上传,不过ElementUI组件的上传图片更易于实现图片以File文件的形式实现,但是这次我需要把图片转换为base64编码来实现图片的上传

  • VueQuillEditor富文本上传图片(非base64)

    前言 本篇文章将介绍vue-quill-editor上传图片的那些事,通常来说,我们数据库内都是保存图片路径的,所以上传完图片之后,要回传一个路径给前端,这才是完整的上传步骤. 第一步:上传图片,第二步:保存到服务器,并且生成路径保存到数据库,第三步:回传前端,后台图片路径,前端显示图片. 本文中使用了element-ui框架来帮助我完成前端展示工作. 上传图片 上传图片也有几种方式,比如直接使用file控件上传到指定地址,又或者是借助封装好的上传按钮上传图片,如果是base64传到后台,还需要

  • vue后台返回base64图片无法显示的解决

    目录 vue后台返回base64图片无法显示 解决方法如下 vue中base64转图片格式 vue后台返回base64图片无法显示 关于后台接口返回的图片base64格式页面无法显示的问题,我遇到的原因是因为返回的一串内容里面存在空格或者换行的原因 解决方法如下 let str = `data:image/jpg;base64,${res.imgStr}`         this.mpId = str.replace(/[\r\n]/g, '') let str = `data:image/j

  • java实现后台处理base64图片还原为文件

    目录 后台处理base64图片还原为文件 java Base64解析 关于Base64的解析方式如下 使用如下代码解析 后台处理base64图片还原为文件 /** * 将base64图片解析成文件存放本地 * @param imgStr * @return 本地临时文件的地址 */ private static String generateImage(String imgStr){ if(Strings.isNullOrEmpty(imgStr)){ return null; } BASE64

  • java实现后台返回base64图形编码

    目录 java后台返回base64图形编码 工具类 使用方法 后端返回base64验证码,解析不出来 java后台返回base64图形编码 工具类 package com.liginfo.app.util; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.RenderingHints; import java.awt

  • Android 百度地图marker中图片不显示的解决方法(推荐)

    Android 百度地图marker中图片不显示的解决方法(推荐)

    目的: 根据提供的多个经纬度,显示所在地的marker样式,如下: 问题: 1.发现marker中在线加载的图片无法显示出来: 2.获取多个对象后,却只显示出了一个marker: 以下为官网实现方法: 通过查阅百度官网的文档,我们可以知道,地图标注物的实现方法如下: //定义Maker坐标点 LatLng point = new LatLng(39.963175, 116.400244); //构建Marker图标 BitmapDescriptor bitmap = BitmapDescript

  • vue后台返回格式为二进制流进行文件的下载方式

    目录 后台返回格式为二进制流进行文件的下载 结合项目中 具体文件使用 vue下载保存二进制文件 方法封装:util.js 请求接口 方法调用 后台返回格式为二进制流进行文件的下载 结合项目中 封装get请求携带token,进行接收二进制流 export function getHeader() {     const token = getToken();     if (token) {         return {             headers: {              

  • javascript动态改变img的src属性图片不显示的解决方法

    首先讲下这个bug的出现的情况,页面中有 复制代码 代码如下: <a href="javascript:void(0)" onclick="document.getElementById('current').src='images/001.jpg';"> 这么一个a标签,onclick中的JS代码就是改变id为current的img标签的src属性,以达到动态切换图片的效果.可是不幸的是:IE是动态改变的图片的路径,但是图片却不显示出来,得右键&quo

  • PHP CURL采集百度搜寻结果图片不显示问题的解决方法

    PHP CURL采集百度搜寻结果图片不显示问题的解决方法

    1.根据关键字采集百度搜寻结果 根据关键字采集百度搜寻结果,可以使用curl实现,代码如下: <?php function doCurl($url, $data=array(), $header=array(), $timeout=30){ $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_HTTPHEADER, $header); curl_setopt($ch, CURLOPT_R

  • java 后台将base64字符串保存为图片的方法

    本文介绍了java 后台将base64字符串保存为图片的方法,分享给大家,具体如下: 直接上代码: import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; public class Base64T

  • vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    在项目中遇到需要动态加载图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. HTML如下: JS如下: 以上这篇vue中如何动态绑定图片,vue中通过data返回图片路径的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js中的图片引用路径的方式 基于vue 动态加载图片src的解决方法 vue cli使用绝对路径引用图片问题的解决

  • Vue动态加载图片在跨域时无法显示的问题及解决方法

    写在前面 小记,就简单写了 .问题:VUE开发时因为要访问后端的接口所以要配置请求转发,如果直接转发全部请求,那么VUE动态绑定的src也会转发到后端,因为图片在前端,所以会收到404 NOT FOUND的报错. 常规的请求转发 在vue-cli3内,直接编辑vue.config.js,如下: let proxyObj={}; proxyObj['/']={ ws:false, target:'http://localhost:8023',//后端地址 changeOrigin:true, pa

随机推荐