微信小程序请求接口返回的二维码(图片),本地工具和真机测试都能显示,上线之后不显示问题

请求后端接口返回的图片:

页面展示:

代码实现:

:show-menu-by-longpress="true" 是长按保存图片

base64Code 是转为base64的地址

html 复制代码
<image class="code" :src="base64Code" alt="" :show-menu-by-longpress="true" />

BASE_URL 是拼接接口地址的

javascript 复制代码
const base64Code = ref('');
onLoad(() => {
  //route.value.query.scene是扫描二维码后跳转链接传过来的参数(二维码携带链接是后端处理的),也就是id名称(因为我这个是扫描二维码还是跳到当前这个页面的,而后端传过来的参数名和我上个页面跳转过来传的参数名不一样)
  //route.value.query.id是上个页面跳转传过来的参数
  const id = route.value.query.id || route.value.query.scene;
  uni.request({
    url: BASE_URL + '/api/Product/GetCode?id=' + id,
    responseType: 'arraybuffer',
    success: (res: any) => {
      base64Code.value =
        'data:image/png;base64,' + uni.arrayBufferToBase64(res.data);
    },
    fail: (err) => {
      console.log(err);
    },
  });
});

这样写的话好像本地和真机调试是可以出来的,但到体验版和正式版上就是空白了,经过测试,把转成base64后的地址中的换行清除一下就可以了;

base64Code.value =

'data:image/png;base64,' + uni.arrayBufferToBase64(res.data).replace(/[\r\n]/g, '');

相关推荐
晓得迷路了12 小时前
栗子前端技术周刊第 120 期 - Vite 8.0、Solid v2.0.0 Beta、TypeScript 6.0 RC...
前端·javascript·vite
学习3人组12 小时前
PowerShell 执行策略限制导致的 `npm` 命令无法运行的安全错误
前端·安全·npm
optimistic_chen12 小时前
【Vue入门】组件及组件化
前端·javascript·vue.js·html·组件
北寻北爱12 小时前
面试题-css篇
前端
Hello_Embed13 小时前
LVGL 入门(八):标签控件 lv_label
前端·笔记·stm32·单片机·嵌入式
小江的记录本13 小时前
【AOP】AOP-面向切面编程 (系统性知识体系全解)
java·前端·后端·python·网络协议·青少年编程·代理模式
鹏多多13 小时前
Flutter使用pretty_qr_code生成高颜值二维码
android·前端·flutter
Qiuner13 小时前
浏览器拓展通用安装方法 edge浏览器、谷歌浏览器、google浏览器、火狐浏览器
前端·google·edge
..过云雨13 小时前
【负载均衡oj项目】03. compile_server编译运行服务设计
运维·c++·html·负载均衡
xiaoxue..13 小时前
前后端双令牌认证(Access Token + Refresh Token)全方案实现:安全与体验兼得
前端·后端·web安全·面试·typescript·nestjs