微信小程序|图片加载和布局 解决渲染层网络层错误

项目：计时器

效果：优化图片布局，减少渲染层网络层错误的问题；点击图片变色

参考：b站番茄时钟项目

WXML：

<!-- 利用rpx布局行列，栈道读取图片名称 -->
 <view class="task_cate">
		<view 
			 wx:for="{{cateArr}}" 
			 class="cate_item" 
			 wx:key="cate" 
			 bindtap="clickCate" 
			 data-index="{{index}}"
		     >	
            <view class="cate_icon"> 
				 <image src="../../images/huanjie/{{item.icon}}.png"></image> 
		    </view>
            <view class='cate_text {{index == cateActive ? "cate_text_active" : ""}}'>{{item.text}}</view>
		</view>
</view>	 

JavaScript：

const app = getApp()

Page({

  data: {
    cateArr:[
      {
        icon: 'yi',
        text: '立论'
      },
      {
        icon: 'er',
        text: '申论'
      },
      {
        icon: 'san',
        text: '质询'
      },
      {
        icon: 'si',
        text: '自由'
      },

      {
        icon: 'jiebian',
        text: '结辩'
      },
      {
        icon: 'qita',
        text: '自定义'
      }
      
    ],
    
  },


  clickCate:function(e){
    this.setData({
      cateActive:e.currentTarget.dataset.index
    })
  },
})