收藏
评论

为什么图片链接可正常访问但image组件加载不出来图片?官方

因为 image 控件的图片拉取本质上是依赖 wx.downloadFile 的,很多时候是由于图片不规范(content-type / length / 是否302跳转等 )导致拉取不成功,最终表现为加载不出图片。关于这一块我们在持续优化中

166024浏览
最后一次编辑于  2019-09-16
知识库内容非实时更新,可能已过期、失效或不适用于当前情形,请谨慎参考
收藏
反馈

44 个评论

  • 陈宇强
    陈宇强
    2020-09-07

    我经常遇到,同一张本地图片,本地加载有时候出现有时候不出现,太迷了吧这。

    那图片标准是什么?怎样弄图片才百分百出现?有没有一个官方的标准?

    有的话我马上全部改

    2020-09-07
    赞同
    回复 2
    • (•ิ_•ิ)
      (•ิ_•ิ)
      2020-11-25
      请问一下最后是通过什么方式解决的这个问题呀?我现在也是遇到了这个问题T T
      2020-11-25
      回复
    • 钟哥
      钟哥
      02-28
      前阵子使用 vant-ui 实现图片上传预览功能(都测试过的),最近客户度反应图片无法预览,这两天都在查看或找解决办法,结果图片可以上传成功和路径是对的,图片就是无法显示,还没还以为是 vat-ui 的问题 然后也换成普通的image控件也无法显示。唉,气死个人。现在还在加班处理这个问题。
      02-28
      回复
  • People's Hunter
    People's Hunter
    2020-09-02

    请问 图片不规范 是指啥? 有 具体的规范指导么?

    2020-09-02
    赞同
    回复
  • lanlan滴七月
    lanlan滴七月
    2020-05-18

    请问解决了吗,最近在写小程序时也是请求图片的地址可以访问,但是小程序上显示就是一块白的(不显示),这个问题出现概率不高但还是有,很影响用户体验

    2020-05-18
    赞同
    回复 10
    • 芸
      2020-05-18
      +1
      2020-05-18
      回复
    • 荧光棒
      荧光棒
      2020-05-19
      +1
      2020-05-19
      回复
    • 三年之期
      三年之期
      2020-06-06回复荧光棒
      +1
      2020-06-06
      回复
    • 小桥流水
      小桥流水
      2020-06-20
      +1
      2020-06-20
      1
      回复
    • 🐾 Mitch
      🐾 Mitch
      2020-06-24
      +1
      2020-06-24
      回复
    查看更多(5)
  • ⛄ WELLS 💤
    ⛄ WELLS 💤
    2020-04-30

    ios 9.3.2

    微信: 7.0.9

    小程序版本: 2.10.4

    iphone6 plus

    小程序加载一些大图的时候,model 设置为: aspectFill 有可能会无法显示。(非必现,下图为测试图片)

    图片元素在页面是是可见的(设置board后,见到边框了。打印onLoad 事件也正常加载)。

    现在的解决方案是 将model改成: widthFix。页面图片就可以看到了。



    2020-04-30
    赞同
    回复
  • 郑旭东
    郑旭东
    2020-04-20

    那么问题来了,wx.downloadFile有并发10个的限制,我一个页面上图片多了,好好的图片也显示不出来。

    2020-04-20
    赞同
    回复
  • 白筱汐
    白筱汐
    2020-03-30

    当初刚刚出来的时候,canvas的文档跟html5的canvas不一样。好的我看了半天,现在又改成web html5 的canvas.

    别人w3c出来多少年了,还需要你微信小程序去验证它的正确性?动不动改文档,结果还是抄袭web,给前端开发者制作麻烦


    2020-03-30
    赞同
    回复
  • Peter👊
    Peter👊
    2020-03-18

    gif图片如何在安卓机下面再次播放(不循环的gif图),安卓机下gif图片连接加随机数无效的问题。

    2020-03-18
    赞同
    回复
  • 😁
    😁
    2020-03-17

    点击上传图片后 赋值一个新的url 偶尔是显示成功的 偶尔就是404 但是浏览器都是可以直接打开的, 并且把连接写死在image标签里面又是加载ok的 上传后赋值就binderror - 404 渲染条件wx:if也写好了的 比如 https://s1.codooncdn.com/xiaochengxu/internal-user/2020-03-17T14.44.34/owLawzPTR2MtUXjzVf.jpeg

    2020-03-17
    赞同
    回复 1
  • 阿啦嘞
    阿啦嘞
    2020-01-02

    大量报错都是:getLocalImgData:fail get file data fail

    但是图片的src都是https的,且都可以访问。为什么会这样呢?已经报警一天了,求解什么情况下会触发这个。

    报错详情:

    src: https://p0.meituan.net/mallimages/57f112e47057186996c015f6695f42e951342.jpg,报错时computedSrc为https://p0.meituan.net/mallimages/57f112e47057186996c015f6695f42e951342.jpg,当前computedSrc:https://p0.meituan.net/mallimages/57f112e47057186996c015f6695f42e951342.jpg,是否显示了默认占位图true,msg: getLocalImgData:fail get file data fail
    

    代码如下:

    js

    setSrc(src) {
             const { enableClip = true, enableWebp = true } =(imageConf && imageConf[`${platform}_${lxRtnm}`]) || {};
                const { url = src, logoLength = 0 } = webp(src, this.data.webpConf, {
                    enableClip,
                    enableWebp
                });
                this.setData({
                    computedSrc: url,
                    logoLength,
                    isShowPlaceholder: !src
                });
            },
            webpLoadError(e) {
                const { computedSrc, src } = this.data;
                const isWebp = computedSrc.endsWith('.webp');
                const isClip =
                    isWebp ||
                    !(
                        computedSrc.endsWith('.png') ||
                        computedSrc.endsWith('.jpg') ||
                        computedSrc.endsWith('.gif')
                    );
                if (computedSrc !== src) {
                    this.setData({
                        computedSrc: src
                    });
                } else {
                    this.setData({
                        isShowPlaceholder: true
                    });
                }
                const msg = `src: ${src},报错时computedSrc为${computedSrc},当前computedSrc:${
                    this.data.computedSrc
                },是否显示了默认占位图${this.data.isShowPlaceholder},msg: ${e.detail &&
                    e.detail.errMsg}`;
                getApp().$cat.reportError(
                    CAT_SEC_CATEGORY.IMAGE_LOAD_ERROR(
                        `${isWebp ? 'webp' : isClip ? 'clip' : 'source'}`,
                        msg
                    )
                );
                this.triggerEvent('error', e);
                console.error(`webpLoadError`, msg);
            },
            webpLoadSuccess(e) {
                this.triggerEvent('load', e);
            }
    

    wxml

    <view wx:if="{{isShowPlaceholder}}" class="placeholder-img-container {{isWithEmptyBoder? 'border':''}} custom-class" style="{{styleStr}};background-color:{{pbgColor}}; width:{{webpConf.isAuto ? '100%': webpConf.width || '50rpx'}}; height: {{webpConf.isAuto ? '100%': webpConf.height || '50rpx'}}">
        <view wx:if="{{logoLength}}" class="placeholder-img-{{'@{values/appName}'==='maicai' ? 'mc':'xx'}}" style="width: {{logoLength}}rpx; height: {{logoLength}}rpx"></view>{{R.values.appName}}
    </view>
    <image wx:else class="real-img {{isWithEmptyBoder? 'border':''}} custom-class" style="{{styleStr}};width:{{webpConf.isAuto ? '100%':webpConf.width}};height:{{webpConf.isAuto ? '100%':webpConf.height}};" src="{{computedSrc}}" binderror="webpLoadError" bindload="webpLoadSuccess" mode="{{mode}}" lazy-load="{{lazyLoad}}" webp />
    
    2020-01-02
    赞同
    回复 1
    • 灵芝
      灵芝
      2020-01-02
      你好,麻烦单独发帖反馈
      2020-01-02
      回复
  • see you
    see you
    2019-12-24

    为什么image scr里面与$符号 ,就无法加载了 ;我记得之前没有影响的

    2019-12-24
    赞同
    回复 1
    • 灵芝
      灵芝
      2019-12-24
      你好,这个问题麻烦单独发帖反馈
      2019-12-24
      回复

正在加载...

登录 后发表内容