wxml：

<view class="func-button" bind:tap="navToGood" data-id="1181000">
  <!-- <view> 桶装水 </view> -->
  <view> 桶装水 </view>
  <image src="/images/桶装水.svg" />
</view>
<view class="func-button">
  <image src="/images/桶装水.svg" />
  <view> 桶装水 </view>
</view>
<view class="func-button">
  <image src="/images/桶装水.svg" />
  <view> 桶装水 </view>
</view>

wxcc:

.func-button {
  padding: 10rpx;
  background-color: white;
  height: 160rpx;
  width: 170rpx;
  /* font-size: 12px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border-radius: 10px !important;
  /* box-shadow: -1px 4px 0px #f0f0f0; */
  /* text-align: center; */
}

页面上，点击文字区域是可以响应点击事件的，可是点击图片区域就没有反应，这是为啥呢？

解决了，

用image组件但是不显式得定义长度和宽度的话，虽然在flex父组件中，但是image组件还是会自说自话得定义一个超出父组件区域的box，虽然图片还是按需要的位置和大小显示。

这导致，我第一个button被第二个button挡住了。

解决：给image组件定义和父组件一样的高度和宽度

.func-button image {
  height: 160rpx;
  width: 170rpx;
}

我感觉这是image组件的bug，使用view组件不会有这种问题