收藏
评论

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

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

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

58 个评论

  • 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
      回复
  • 2019-09-19

    这个好像是我遇到的问题,无解呢,好像image组件有问题

    2019-09-19
    赞同
    回复 3
    • 2019-10-10
      我也遇到了 有什么办法解决吗
      2019-10-10
      回复
    • 小👣meet to👣天
      小👣meet to👣天
      2019-12-20
      有解决方案了没 我这边也遇到了
      2019-12-20
      回复
    • 👀JH
      👀JH
      2020-01-07
      有解决方式了吗?
      2020-01-07
      回复

正在加载...

登录 后发表内容