微信小程序设置图片加载不出来解决方案

因为公司项目的需求，最近在做微信小程序。公司项目是一个购物类的APP，在调试项目的时候遇到一个奇怪的问题：在商品的分类列表中，如果库存为0的商品，商品是有一个"已售罄"的logo的。点击商品列表页进入商品详情页，在商品详情页也会有一个"已售罄"的logo。

商品列表页 商品详情页

然而如果在商品列表页执行频繁点击列表条目操作，频繁进入商品详情页，这时发现商品详情页的"已售罄"logo时而时而没有。打开小程序的调试按钮，可以查看图片的url并不为空。

已售罄图片链接地址不为空

查看代码，后来把“已售罄”logo 显示隐藏的判断条件换成 hidden 才算解决问题！

用 hidden 这个判断条件才算解决问题

查看官方文档，

wx:ifvshidden

因为wx:if之中的模板也可能包含数据绑定，所有当wx:if的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时wx:if也是惰性的，如果在初始渲染条件为false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用hidden更好，如果在运行时条件不大可能改变则wx:if较好。