微信小程序使用for循环展示图片，如果点击其中一个怎么获取该图片的src

可以在小程序中给每个图片绑定一个事件，当用户点击某个图片时触发该事件，并将该图片的src传递给事件处理函数。

具体实现方法如下：

1. 在wxml文件中，使用for循环展示图片，并给每个图片绑定一个点击事件：

<view wx:for="{{imageList}}" wx:key="index">
  <image src="{{item.src}}" data-src="{{item.src}}" bindtap="previewImage"></image>
</view>

其中，`imageList`是存储图片信息的数组，`item.src`表示当前图片的src，`data-src`用于存储图片的真实src，`bindtap="previewImage"`表示点击图片时触发名为`previewImage`的事件处理函数。

2. 在js文件中，编写事件处理函数`previewImage`：

previewImage: function(e) {
  // 获取当前点击的图片的src
  var src = e.currentTarget.dataset.src;
  // 显示图片预览
  wx.previewImage({
    urls: [src]
  })
}

在事件处理函数中，使用`e.currentTarget.dataset.src`获取当前点击的图片的真实src，并将其作为参数传递给小程序提供的预览图片API`wx.previewImage`，即可在新页面中显示该图片的预览。

相关问题

微信小程序使用for循环，实现左边大图，右边分4区块放小图

要实现微信小程序中使用for循环来实现左侧大图和右侧四个小图的布局，可以使用```<block>```标签和```wx:for```指令来实现。具体实现步骤如下：

首先，在WXML中定义一个```<block>```标签来包裹左侧大图和右侧四个小图，如下所示：

<block wx:for="{{images}}" wx:key="index">
   <view class="container">
      <image class="left-image" src="{{item.leftImageUrl}}"></image>
      <view class="right-images">
         <image class="right-image" src="{{item.rightImageUrl1}}"></image>
         <image class="right-image" src="{{item.rightImageUrl2}}"></image>
         <view class="right-images-row">
            <image class="right-image" src="{{item.rightImageUrl3}}"></image>
            <image class="right-image" src="{{item.rightImageUrl4}}"></image>
         </view>
      </view>
   </view>
</block>

其中，```images```为数据源，```leftImageUrl```为左侧大图的图片链接，```rightImageUrl1```至```rightImageUrl4```为右侧小图的图片链接。

接下来，在JS文件中定义数据源，如下所示：

Page({
   data: {
      images: [
         {
            leftImageUrl: 'LEFT_IMAGE_URL_1',
            rightImageUrl1: 'RIGHT_IMAGE_URL_1_1',
            rightImageUrl2: 'RIGHT_IMAGE_URL_1_2',
            rightImageUrl3: 'RIGHT_IMAGE_URL_1_3',
            rightImageUrl4: 'RIGHT_IMAGE_URL_1_4'
         },
         {
            leftImageUrl: 'LEFT_IMAGE_URL_2',
            rightImageUrl1: 'RIGHT_IMAGE_URL_2_1',
            rightImageUrl2: 'RIGHT_IMAGE_URL_2_2',
            rightImageUrl3: 'RIGHT_IMAGE_URL_2_3',
            rightImageUrl4: 'RIGHT_IMAGE_URL_2_4'
         },
         {
            leftImageUrl: 'LEFT_IMAGE_URL_3',
            rightImageUrl1: 'RIGHT_IMAGE_URL_3_1',
            rightImageUrl2: 'RIGHT_IMAGE_URL_3_2',
            rightImageUrl3: 'RIGHT_IMAGE_URL_3_3',
            rightImageUrl4: 'RIGHT_IMAGE_URL_3_4'
         }
      ]
   },
   onLoad: function () {}
})

其中，```LEFT_IMAGE_URL_1```至```LEFT_IMAGE_URL_3```为左侧大图的图片链接，```RIGHT_IMAGE_URL_1_1```至```RIGHT_IMAGE_URL_3_4```为右侧小图的图片链接。

最后，在WXSS中定义布局样式，如下所示：

.container {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 10px;
}

.left-image {
   width: 60%;
   height: 100%;
}

.right-images {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: 38%;
   height: 100%;
}

.right-images-row {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
}

.right-image {
   width: 100%;
   height: 48%;
   border-radius: 5px;
}

其中，```container```为整个布局的样式类，```left-image```和```right-images```分别为左侧大图和右侧小图的样式类，```right-images-row```为右侧小图的一行，```right-image```为右侧小图的样式类，```border-radius```为圆角样式。由于这里使用了```wx:for```指令，所以样式类的定义需要写在```<block>```标签外面，以适用所有循环的元素。

微信小程序循环输出图片对象

要循环输出图片对象，可以使用小程序的wx:for循环和wx:for-item、wx:for-index属性来实现。具体的步骤如下：

1.在wxml文件中，定义一个图片列表的区域，使用wx:for循环遍历图片列表，并使用wx:for-item和wx:for-index属性获取当前项的数据和索引。

<view>
  <block wx:for="{{imageList}}" wx:for-item="image" wx:for-index="index">
    <image src="{{image.src}}" mode="aspectFit"></image>
  </block>
</view>

2.在js文件中，定义一个图片列表的数组，将需要展示的图片的路径和其他相关信息存储在一个对象中，并将该对象存储在数组中，然后将该数组赋值给data中的imageList变量。

Page({
  data: {
    imageList: [
      {
        src: 'image1.jpg',
        name: '图片1',
        // ...其他图片相关信息
      },
      {
        src: 'image2.jpg',
        name: '图片2',
        // ...其他图片相关信息
      },
      {
        src: 'image3.jpg',
        name: '图片3',
        // ...其他图片相关信息
      },
      // ...其他图片对象
    ]
  },
  // ...其他代码
})

这样就可以循环输出图片对象了，每个图片对象会根据wx:for属性循环渲染一次。在wxml中，可以使用{{image.属性名}}的方式获取对象中的属性值。例如上面的代码中，使用{{image.src}}来获取图片的路径。