1.问题描述

小程序项目需要后端接口提供base64流的图片,对于H5的语法,前面拼接后面的代码即可: data:image/png;base64,

先看后台代码:

@RestController
@RequestMapping("/file")
public class FileController { /**
* 图片转为base64流
*/
@GetMapping("/imgToBase64")
public JSONObject imgToBase64() {
JSONObject jsonObject = new JSONObject();
try {
//读取文件
InputStream in = new BufferedInputStream(new FileInputStream("C:\\Users\\zhongyushi\\Downloads\\3.jpg"));
byte[] srcBytes = new byte[in.available()];
in.read(srcBytes);
//把字节流转为base64字符流
String encode = new BASE64Encoder().encode(srcBytes);
jsonObject.put("data", encode);
} catch (Exception e) {
e.printStackTrace();
}
return jsonObject;
} /**
* 图片转为字节流
*/
@GetMapping("/imgToByte")
public JSONObject imgToByte() {
JSONObject jsonObject = new JSONObject();
try {
//读取文件
InputStream in = new BufferedInputStream(new FileInputStream("C:\\Users\\zhongyushi\\Downloads\\3.jpg"));
byte[] srcBytes = new byte[in.available()];
in.read(srcBytes);
jsonObject.put("data", srcBytes);
} catch (Exception e) {
e.printStackTrace();
}
return jsonObject;
}
}

以vue的代码为例说明:

<template>
<img :src="data:imageUrl">
</template>
<script>
export default {
name: '',
created() {
this.getImage()
},
data() {
return {
imageUrl: ''
}
},
methods: {
getImage() {
axios.get('http://localhost:8081/file/imgToBase64').then(res => {
this.imageUrl = 'data:image/png;base64,' + res.data.data
}, err => {
console.log(err)
})
}
},
}
</script>
<style scoped>
</style>

但对于微信小程序却不行,原因是在返回的字符串中,包含了换行符‘\n’,H5可以自动解析并去除,微信小程序却没有这么智能。

2.解决方案

在微信小程序中需要在获取到数据后把换行符替换。

WXML代码:

<view>
<image src="{{imgUrl}}" style="width:100px;height:44px;"></image>
</view>

JAVASCRIPT代码:

Page({
data: {
imgUrl: ''
},
onLoad() {
this.getImg()
},
getImg() {
let that = this
wx.request({
method: 'GET',
url: 'http://localhost:8081/file/imgToBase64',
success(res) {
let data = res.data.data
data = data.replace(/[\r\n]/g, "")
that.setData({
imgUrl: 'data:image/png;base64,' +data
})
}
})
}
})

3.扩展说明

仔细观察会发现,我是后台代码有两种方法,另外一种是直接返回字节流而不是base64流,那么这种方式就不会存在上述的问题,我以另一种组件说明。

JSON代码:

{
"usingComponents": {
"mp-uploader": "weui-miniprogram/uploader/uploader"
}
}

WXML代码:

<view>
<mp-uploader files="{{files}}" max-count="5" title="图片上传" tips="图片上传提示"></mp-uploader>
</view>

JAVASCRIPT代码:

Page({
data: {
files: [],
},
onLoad() {
this.getImg()
},
getImg() {
let that = this
wx.request({
method: 'GET',
url: 'http://localhost:8081/file/imgToBase64',
success(res) {
let arr = []
arr.push({
url: 'data:image/png;base64,' + res.data.data
})
that.setData({
files: arr
})
}
})
}
})

上述使用的是weui的扩展组件:图片上传的组件,使用的是字节流的方式获取图片并显示。

base64图片显示问题的更多相关文章

  1. html img Src base64 图片显示

    http://blog.csdn.net/knxw0001/article/details/10983605 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: ...

  2. #ZgotmplZ go web 开发 base64 图片显示

    Go Web开发,用Base64作为图片URL时遇到#ZgotmplZ的问题 - 简书 https://www.jianshu.com/p/54fc25da7c4f // var imgBase64 ...

  3. MVC显示Base64图片

    本篇演示ASP.NET MVC应用程序,显示Base64图片. Insus.NET浏览网页,发现一个站点http://www.base64-image.de/ 想起以前也有实现过<如何把数据流转 ...

  4. flutter 显示base64 图片

    后台返回base64 为了本地显示需要转换成Uint8List 1.导入包 import 'dart:convert';2.后台返回base64 格式不被识别需要切分 //'"data:im ...

  5. img src 使用 base64 图片数据

    img src 使用 base64 图片数据 在网页上显示一张图片通常是 <img src="xxx.png" > 或 <img src="www.ur ...

  6. Base64 图片转换工具

    以前在写asp的后台的时候,有一个上传功能是必须的,那时候进行的图片预览(未上传前)其实就是获取本地的图片路径来显示图片,但是随着HTML5的出现,可以把图片通过编码来实现预览. 在雅虎的36条速度优 ...

  7. base64图片在各种浏览器的兼容性处理

    IE浏览器目前最高的版本是v11,而微软放弃了IE,转向新的浏览器开发,并取名为Edge.base64图片在IE9及以后的图片均能显示没有问题,而Firefox, Chrome, Safari等非IE ...

  8. 利用cropper插件裁剪本地图片,然后将裁剪过后的base64图片上传至七牛云空间

    现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...

  9. chrome 隐藏技能之 base64 图片转换

    有时候我们要转换图片为base64,或者将base64转回图片,可能都需要找一些在线工具或者软件类型的工具才行.当然 chrome 也算是软件,但是好在做前端的都有 chrome.好了,来看下简单的例 ...

随机推荐

  1. (28)Vim 4

    1.Vim多窗口编辑 在编辑文件时,有时需要参考另一个文件,如果在两个文件之间进行切换则比较麻烦.可以使用 Vim 同时打开两个文件,每个文件分别占用一个窗口. 例如,在査看 /etc/passwd ...

  2. 基于Java+Spring Boot开源项目JeeSite的Jenkins持续交互介绍

    一.实战项目介绍- JeeSite 基于Spring Boot 2.0 数据存储MySQL 语言:Java 规模大小:适中,适合初学者 源码地址:https://gitee.com/thinkgem/ ...

  3. linux(1)Mac上传文件到Linux服务器

    前言 我们使用mac时,想让本地文件上传至服务器,该怎么办呢 windows系统,我们可以使用xftp或者rz命令,那么mac呢? mac系统,我们可以使用sftp.scp或者rz命令,本文介绍sft ...

  4. Jenkins(1)安装

    前言 jenkins的环境搭建方法有很多,本篇使用docker快速搭建一个jenkins环境. 环境准备: mac/Linux docker docker拉去jenkins镜像 先下载jenkins镜 ...

  5. linux虚拟摄像头vivid配置

    总述    最近在看摄像头驱动,需要配置虚拟摄像头的驱动,但是教程里面是linux2.6内核的,实际电脑的是Ubuntu16,内核是linux4.15版本,从2.6到4.15内核好多文件发生了变化,所 ...

  6. Hive创建HBase,ES外部表

    1.创建HBase外部表 CREATE EXTERNAL TABLE `ods_women`( `rowkey` string COMMENT 'from deserializer', `articl ...

  7. B - Power Strings

    Given two strings a and b we define a*b to be their concatenation. For example, if a = "abc&quo ...

  8. 2019牛客多校第三场D-Big Integer

    题意 定义\(A(n)\) 为 n个1表示的十进制数,例如\(A(3) = 111\) 然后对于\(1 \le i \le n,1\le j \le m\) 问有多少的 \(pairs(i,j)\)满 ...

  9. 【uva 534】Frogger(图论--最小瓶颈路 模版题)

    题意:平面上有N个石头,给出坐标.一只青蛙从1号石头跳到2号石头,使路径上的最长便最短.输出这个值.(2≤N≤200) 解法:最小瓶颈树.而由于这题N比较小便可以用2种方法:1.最短路径中提到过的Fl ...

  10. hdu1625 Numbering Paths (floyd判环)

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submission ...