Vant 实现图片展示及点击放大查看

<template>
  <div>
    <van-image
      v-for='image in images'
      :key='image.id'
      :src='image.url'
      @click='showImage(image.url)'
      fit='contain'
      lazy-load
    ></van-image>
<pre><code>&lt;van-popup v-model='showPopup' position='center'&gt;
  &lt;van-image :src='popupImage' fit='contain'&gt;&lt;/van-image&gt;
&lt;/van-popup&gt;
</code></pre>
  </div>
</template>
<script>
export default {
  data() {
    return {
      images: [], // 从数据库中获取的图片数据
      showPopup: false,
      popupImage: null,
    };
  },
  methods: {
    showImage(url) {
      this.popupImage = url;
      this.showPopup = true;
    },
  },
};
</script>
<p>上述代码假设你已经从数据库中获取了图片数据，并将其存储在<code>images</code>数组中。然后使用<code>v-for</code>指令遍历<code>images</code>数组，利用<code>van-image</code>组件将每个图片展示出来。当用户点击图片时，触发<code>showImage</code>方法，将点击的图片URL赋值给<code>popupImage</code>，并将<code>showPopup</code>设为<code>true</code>，以展示放大查看的弹出窗口。</p>
<p>在模板中，使用<code>van-popup</code>组件来实现放大查看的弹出窗口，设置<code>v-model</code>指令绑定<code>showPopup</code>变量，控制弹窗的显示与隐藏。在弹出窗口中，使用<code>van-image</code>组件展示被点击的图片，将<code>popupImage</code>赋值给<code>src</code>属性。</p>
<p>需要注意的是，上述代码使用了Vant组件库的<code>van-image</code>和<code>van-popup</code>组件，确保你已经安装并引入了这些组件。</p>