收藏
回答

使用swiper轮显图片时,image标签下的图片不显示的情况。哪位大大帮忙看一下代码可用吗?

按照网上的教程弄了一个轮播图片,用的是swiper组件。开始用了相对路径图片,后来查网上说不能用,于是改了http链接,结果还是没有显示出来。搞了一个晚上,实在是不知道怎么回事了。不校验合法域名以及https证书那个已经点了,但是图片依旧不显示。求大大们帮我看看是咋回事。

index.wxss

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}


.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}


.usermotto {
  margin-top: 200px;
}


.swiper {
  height: 348rpx;
}


.slide-image {
  width: 100%;
  height: 100%;
}


index.wxml

<!--index.wxml-->
<view class="container">
  <swiper class="swiper" indicator-active-color="{{indicatorActiveColor}}" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true">
    <block wx:for="{{advertsImagesUrls}}" wx:key="key">
      <swiper-item>
        <image src='{{item}}' class='slide-image' />
      </swiper-item>
    </block>
  </swiper>
</view>


index.js

// index.js
// 获取应用实例
const app = getApp()


Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName'), // 如需尝试获取用户信息可改为false
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 1000,
    indicatorActiveColor: "#fff",
    advertsImagesUrls: [
      "https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg",  
      "http://img.tcdachun.com/tuku/yulantu/130408/240471-13040P6110427.jpg",
    ],
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  toupper:function(){
    console.log("触发了toupper");
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认,开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息,预计自2021年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})


回答关注问题邀请回答
收藏

3 个回答

  • LeNord
    LeNord
    2021-10-21

    显示啊,代码块链接:https://developers.weixin.qq.com/s/2xcxXdm67guC

    2021-10-21
    有用 1
    回复
  • ???
    ???
    2021-10-21

    审查元素看下swiper内部的image标签是否有src属性;

    检查wxss是否设置;

    2021-10-21
    有用
    回复 2
    • Donitry
      Donitry
      2021-10-21
      有的啊,但是就是不显示。是不是没有交今年的300块费用的关系?
      2021-10-21
      回复
    • ???
      ???
      2021-10-22回复Donitry
      哈哈,脑洞很大,设置高呢
      2021-10-22
      回复
  • Code Weaver
    Code Weaver
    2021-10-21

    2021-10-21
    有用
    回复 2
    • Donitry
      Donitry
      2021-10-21
      这会不会是没交腾讯那300块保护费的关系呢?? 我这死活出不来
      2021-10-21
      回复
    • Code Weaver
      Code Weaver
      2021-10-22回复Donitry
      没关系。IDE版本是多少呢
      2021-10-22
      回复
登录 后发表内容