微信小程序中，如何根据选择的结果显示图片？

Question

目前在images文件里有若干张图片，我想在微信小程序中设置一个日期选择器和站点选择器，根据选择的日期与站点展示images里的不同文件。目前已经实现了选择器的设置（使用picker组件），但是关于图片的src应该怎么弄不太清楚，烦请各位赐教！

下面是选择器的设置
.wxml：

<view class="section">
  <view class="section_title">站点</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  <view class="picker">
    当前选择:{{array[index]}}
  </view>
  </picker>
</view>
<view class="section">
  <view class="section_title">日期</view>
  <picker mode="date" value="{{date}}" start="2021-06-24" end="2021-08-15" bindchange="bindDateChange">
    <view class="picker">
      当前选择:{{date}}
      </view>
  </picker>
</view>
<view>
  <image class="widget__arrow" src="/images/1.jpg" mode="aspectFill">
  </image>
</view>

.js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
      array:['S1','S2','S3'],
      objectArray:[
        {id:0, name:'S1'},
        {id:1, name:'S2'},
        {id:2, name:'S3'}],
        index:0,
        date:'2021-06-24'
  },
  bindPickerChange:function(e){
    console.log('picker发送选择改变，携带值为',e.detail.value)
    this.setData({
      index:e.detail.value
    })
  },
  bindDateChange:function(e){
    console.log('picker发送选择改变，携带值为',e.detail.value)
    this.setData({
      date:e.detail.value
    })
  },
})

Answer 1

你这个 你可以 把 图片的地址 和一些信息 组合成 数组。然后根据选中的值 过滤数组 。然后循环数组展示 。

例如 伪代码如下

 let arr=[
        {
            id:1,
            name:"xxx",
            src:"./images/xxx.png"
        },
        {
            id:2,
            name:"xxx2",
            src:"./images/xxx2.png"
        }
    ] ;
    let date="9.20";
    let zhandian="7";

    if(data=="9.20" &&zhandian==7){
        arr=arr.filter((item)=>{
            return item.id==2;
        })
    }