微信小程序 图片显示不出来的问题 100%管用

这篇具有很好参考价值的文章主要介绍了微信小程序 图片显示不出来的问题 100%管用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

相信大多数微信小程序的开发者都会遇到的一个问题就是图片在模拟器上能显示 跑到真机上就不行,而且ios能显示安卓却显示不了的问题,这个问题也是困扰了我很久,最终想到了解决方案。  

大多数情况下 都是后端返回一个url地址然后我们再拿基准路径去拼接 ok这没问题 在pc端和ios都可以显示,但是安卓不行,因为我们拼接的这个路径实际上返回来的是一个流我们需要进行处理转换成base64格式才能正常显示 而pc和ios可能内部做了处理所以能显示出来。

为此我封装了一个小工具 话不多说上代码:

如果后端返回的ulr路径最后 没带文件名可以把fileNmae注释掉以免报错,然后resolve那里写死成jpeg(正常情况都会带上)

使用方法:微信小程序图片不正常,微信小程序,小程序,前端,javascript

 文章来源地址https://www.toymoban.com/news/detail-603563.html

fileStreamturn: function(url) {
  return new Promise(function(resolve,reject) {
    uni.request({
          url: url,
          method: 'GET',
          responseType: 'arraybuffer',
          header:{
            Authorization: token
          },
          success: res => {
            let datas = res.data;
        let fileName = url.slice(url.indexOf('.')+1)
            resolve(`data:image/${fileName};base64,`+uni.arrayBufferToBase64(datas))
          },
        });
  })
},

到了这里,关于微信小程序 图片显示不出来的问题 100%管用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序上传并显示图片

    实现效果: 上传前显示: 点击后可上传,上传后显示: 源代码:  .wxml

    2024年01月18日
    浏览(66)
  • 微信小程序图片文字居中显示

    在微信小程序中,可以通过以下方法将图片和文字居中显示: 1. 使用flex布局:在父容器中设置display为flex,并使用justify-content和align-items属性来实现居中。示例代码如下: ```css .container {   display: flex;   justify-content: center;   align-items: center; } ``` ```xml view class=\\\"container\\\"   image

    2024年02月16日
    浏览(109)
  • 关于微信小程序背景图手机上加载不出来问题的解决方案

    1.问题:平时在给背景图的时候大家的第一反应一定是在css中直接写background-image,直接就把图片当背景放在了那里,但是这样的方法在pc端还是可以的,在小程序端却存在着加载不出来的问题,现在我来给大家提供一个解决方法(插入图片的方法) 2.原理:一个大的父盒子,同时

    2024年02月04日
    浏览(99)
  • uniapp(微信小程序/支付宝小程序) - 最新解决canavs绘制海报、二维码图片等不显示问题,在uniapp小程序开发中使用canavs制作base64图片在真机运行时空白不显示(详细解决方法)

    在uniapp微信小程序 | uniapp支付宝小程序中,详解canavs技术绘制图像后在真实手机上运行不显示的问题,解决uniapp安卓苹果ios运行小程序后二维码/海报无法加载和展示,完美解决兼容问题、图片太大画不出来、加载失败等。支持保存到相册中或长按保存。 很多教程都无效,本

    2024年04月25日
    浏览(53)
  • 微信小程序布局图片上面显示文字

     博主介绍: 本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮

    2023年04月08日
    浏览(42)
  • 微信小程序(二)微信小程序选择本地图片显示并预览(实现左右滑动)

    在微信小程序里面实现选择图片然后预览是一个非常普遍的功能,在我们上传图片文件的时候,都会选择本地的图片进行上传,在上传之前会查看一下自己上传的图片是否准确。所以要做到预览图片。 下面就实现一个简单的本地图片显示预览的功能~~ 1、创建页面 这里我直接

    2024年02月03日
    浏览(76)
  • 微信小程序中无法显示base64图片

    在微信小程序中展示图片信息时,后端返回的数据中的图片地址位base64 在小程序进行图片渲染后,发现有一部分的图片不能成功显示,直接为空白,但是在调试器里查看图片地址已经注入进 src 里面了,尝试将图片地址复制出来用浏览器打开,发现可以正常显示 图片在浏览器

    2024年02月12日
    浏览(67)
  • 微信小程序使用image组件显示图片的方法

    本文实例讲述了微信小程序使用image组件显示图片的方法。分享给大家供大家参考,具体如下: 1、效果展示 2、关键代码 ① index.wxml 代码如下: image style=\\\"width: 300px; height: 300px; margin:10px;\\\" mode=\\\"scaleToFill\\\" src=\\\"{{imageSrc}}\\\"/image ② index.js Page({ data:{ // text:\\\"这是一个页面\\\" imageSrc:\\\'../..

    2024年02月12日
    浏览(93)
  • 微信小程序上,实现图片右上角数字显示

    微信小程序上,实现图片右上角数字显示 直接上代码: 样式代码index.wxss如下: 前端代码index.wxml如下: 微信小程序的效果为:  再分享一个html版本的css右上角显示带数字的圆圈的代码 效果如下:  

    2024年02月16日
    浏览(158)
  • uniapp - 微信小程序实现腾讯地图位置标点展示,将指定地点进行标记选点并以一个图片图标展示出来(详细示例源码,一键复制开箱即用)

    在uniapp微信小程序平台端开发,简单快速的实现在地图上进行位置标点功能,使用腾讯地图并进行标点创建和设置(可以自定义标记点的图片)。 你只需要复制代码,改个标记图标和位置即可。

    2024年02月08日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包