微信小程序这个图片第一次渲染的时候显示其它不显示怎么写

Question

微信小程序这个item.src图片第一次渲染的时候显示其它不显示怎么写

```html
<view class="container">
    <text class="head" selectable="false" space="false" decode="false">最新公告</text>
    <view wx:if="{{ready}}" class="inner">
        <view class="list">
            <view class="item {{item.read?'':'unread'}}" wx:for="{{list}}" data-index="{{index}}" data-type="{{item.type}}" data-id="{{item.id}}" bindtap="goToDetail">
                <image class="" src="{{item.src}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" wx:if=""/>
                    
                <view class="title">
                    <text class="activityTag" wx:if="{{item.type==2}}">活动</text>{{item.title}}
                    <image class="icon" src="../../resources/icons/go_green.png" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""/>
                </view>
                <view class="time-wrap">
                    <text>{{item.time}}</text>
                    
                </view>
            </view>
        </view>
    </view>
    <template is="skeleton" wx:else></template>

```

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 以下回答来自chatgpt:

  在微信小程序中，可以通过使用Image组件的lazy-load属性来实现图片懒加载，从而避免其他图片的干扰。具体实现步骤如下：

  1. 将Image组件的lazy-load属性设置为true，这样图片将会在viewport可见时才会加载。

  <image src="{{ item.src }}" lazy-load="true"></image>
  

  1. 使用CSS对该图片的样式进行控制，例如设置display:none，从而避免其它图片的显示。

  /* 隐藏所有图片，除了目标图片 */
  img {
    display: none;
  }
  img[src="{{ item.src }}"] {
    display: inline-block;
  }
  

  1. 在页面 onLoad 或 onReady 事件中，将目标图片的src属性设置为有效路径，以触发该图片的加载。

  Page({
    onLoad: function () {
      this.setData({
        'item.src': '/path/to/target/image.jpg'
      })
    }
  })
  

  这样，当页面渲染时，所有图片都会被隐藏起来，只有目标图片的lazy-load属性会被触发，从而实现了首次渲染时只显示目标图片的效果。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^