Vue动态图片点击绑定src至lightbox的imgSrc属性问题

你只需要在点击事件中传递当前图片的地址，然后在方法里把它赋值给imgSrc即可，具体修改如下：

1. 修改模板中的点击事件 #

把@click="change"改成传递当前图片的img属性：

<div class="container">
  <div class="image-container">
    <div class="image" v-for="(imagenes, index) in imgBanos" :key="index">
      <!-- 传递当前图片的img地址到change方法 -->
      <img :src="imagenes.img" :id="imagenes.id" @click="change(imagenes.img)">
    </div>
  </div>
  <div class="popup-imag" v-show="show">
    <span @click="reverse">&times;</span>
    <img :src="imgSrc">
  </div>
</div>

2. 修改methods中的change方法 #

让方法接收传递过来的图片地址，赋值给imgSrc并显示灯箱：

export default {
  data() {
    return {
      show: false,
      imgSrc: "",
      imgBanos: [{
          id: 2,
          img: require("../assets/si/2.jpeg")
        },
        {
          id: 3,
          img: require("../assets/si/3.png")
        },
        ...
      ],
    }
  },
  methods: {
    // 接收图片地址参数
    change(imgUrl) {
      this.imgSrc = imgUrl
      this.show = true
    },
    reverse() {
      this.show = false
    }
  }
}

补充：用索引的方式实现（可选） #

如果你想用索引来处理，也可以这么改：

• 模板中传递索引：@click="change(index)"
• 方法中通过索引获取图片地址：

change(index) {
  this.imgSrc = this.imgBanos[index].img
  this.show = true
}

这样点击任意图片时，对应的地址就会绑定到灯箱的imgSrc上，灯箱就能正确显示点击的图片了。

内容的提问来源于stack exchange，提问作者learningfromzero