收藏
评论

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

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

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

61 个评论

  • lanlan滴七月
    lanlan滴七月
    2020-05-18

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

    2020-05-18
    赞同
    回复 11
    • 芸
      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
      回复
    查看更多(6)
  • ⛄ 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
    赞同
    回复
  • 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
      回复
  • 2019-11-07

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

    2019-11-07
    赞同
    回复 1
    • 灵芝
      灵芝
      2019-11-08
      你好,这个问题麻烦单独发帖提问
      2019-11-08
      回复
  • 邹承烨℡¹³¹⁹⁸⁹⁶¹¹⁷⁷
    邹承烨℡¹³¹⁹⁸⁹⁶¹¹⁷⁷
    2019-10-11

    我们这里是只有特定的那一个手机不会显示图片, 是偶现的, 有没有可能是开发者工具编译代码上传的时候出的问题.

    2019-10-11
    赞同
    回复
  • peng
    peng
    2019-10-11

    我也遇到了,如果图片不能访问或不存在 ,在 binderror事件中,重新为src赋值,但视图层不会更新。


    2019-10-11
    赞同
    回复 2
    • 灵芝
      灵芝
      2019-10-11
      这个问题麻烦单独发帖提问一下
      2019-10-11
      回复
    • peng
      peng
      2019-10-11回复灵芝
      我不确定是不是深拷贝的原因引起的,因为我看帖子里有人说了 深拷贝就有这种问题
      2019-10-11
      回复

正在加载...

登录 后发表内容