當前位置 主頁 > 服務器問題 > Linux/apache問題 > 最大化 縮小

    微信小程序圖片加載失敗時替換為默認圖片的方法

    欄目:Linux/apache問題 時間:2019-12-10 16:59

    先看一下效果圖:

    1、第一種情況:單獨加載一個圖片

    index.wxml代碼:

    <image class="userinfo-avatar" src="{{avatar}}" binderror="errorFunction"></image>

    index.js代碼:

    errorFunction: function(){
     this.setData({
      avatar: '/image/default.png'
     }) 
    }

    2、第二種情況:使用for循環,加載多個圖片

    index.wxml代碼:

    <view wx:for="{{imageList}}" wx:for-index="index" wx:for-item="item" wx:key="navItems">
      <image src="{{item.img}}" binderror="errorFunction" data-index='{{index}}' mode="widthFix" />
    </view>
    

    index.js代碼:

    Page({
     /**
     * 頁面的初始數據
     */
     data: {
     imageList:[
      {
      id:1,
      name:'白金蠟',
      price:'60元/次',
      img:'/images/service/1.jpg'
      },
      {
      id: 2,
      name: '棕櫚蠟',
      price: '90元/次',
      img: '/images/service/2.jpg'
      },
      {
      id: 3,
      name: '去污蠟',
      price: '90元/次',
      img: '/images/service/3.jpg'
      },
      {
      id: 4,
      name: '微鍍晶',
      price: '138元/次',
      img: '/images/service/4.jpg'
      },
     ],
     },
     onLoad: function () {
     },
     //圖片加載失敗時
     errorFunction: function (event) {
     var index = event.currentTarget.dataset.index
     var img = 'imageList[' + index + '].img'
     this.setData({
      [img]: '/images/default.jpg'
     })
     }
    })

    總結

    以上所述是小編給大家介紹的微信小程序圖片加載失敗時替換為默認圖片的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對IIS7站長之家網站的支持!
    如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

    下一篇:沒有了
777亚洲人成视频免费视频