收藏
评论

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

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

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

13 个评论

  • 黄雷
    黄雷
    2019-09-23

    现在生产上频繁出现这种问题了。 在网络差的时候,图片会加载不出来,导致切换到正常网络后,图片会一直出不来,一般情况下,用image组件的binderror处理,重新赋值可以解决这种问题,但是,有的手机,比如 Iphone X, Iphone XR, 只会在执行当前页面的binderror方法,这种问题只能说在特定机型上无解了,希望官方尽快出解决方案,修复这个问题

    2019-09-23
    赞同 2
    回复 1
    • I  can
      I can
      2019-10-10
      我的大多数时候不能正常显示,偶尔能显示,数据可以在网页中显示图片,估计这个image组件兼容性有问题,有待改进,等待官方回复
      2019-10-10
      回复
  • 👀JH
    👀JH
    01-06

    这个解决了吗?之前好好的,现在组件基本不显示,点击preview就可以显示。

    01-06
    赞同
    回复
  • 阿啦嘞
    阿啦嘞
    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 />
    
    01-02
    赞同
    回复 1
  • see you
    see you
    2019-12-24

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

    2019-12-24
    赞同
    回复 1
    • 社区技术运营专员-灵芝
      社区技术运营专员-灵芝
      2019-12-24
      你好,这个问题麻烦单独发帖反馈
      2019-12-24
      回复
  • koyshe
    koyshe
    2019-12-23

    同求解决方案

    2019-12-23
    赞同
    回复
  • 小👣meet to👣天
    小👣meet to👣天
    2019-12-20

    我这边也是 轮播图 商品图主图 有时候显示不出来 重新刷新也没有效果 只能重启小程序 就又可以了

    2019-12-20
    赞同
    回复
  • leo01
    leo01
    2019-12-18

    什么时候能优化好呢


    2019-12-18
    赞同
    回复
  • 轻度
    轻度
    2019-12-07

    官方的webp和lazy-load都加了,还是会出现图片加载失败后不再重新加载的问题,也就是图片有地址,但是显示不出来。

    2019-12-07
    赞同
    回复
  • Bubbly_
    Bubbly_
    2019-11-28

    有遇到过图片请求回来但是不展示的情况么,这个地址放在浏览器上是可以显示的,还用encodeURI编码了一遍地址,前两个出来了,最后一个没出来!


    2019-11-28
    赞同
    回复
  • 半表人才
    半表人才
    2019-11-07

    请问我用云ID可以在Image标签内访问图片显示,但是我用wx.cloud.downloadFile下载以后,用生成的临时路径,就不能在Image标签内显示 ,这是什么原因??

    2019-11-07
    赞同
    回复 1
    • 社区技术运营专员-灵芝
      社区技术运营专员-灵芝
      2019-11-08
      你好,这个问题麻烦单独发帖提问
      2019-11-08
      回复

正在加载...

登录 后发表内容