Vue에서 (클릭된 이미지를 확대/축소하기 위해) 모달 대화 상자에 이미지 src를 전달하려면 어떻게 해야 합니까?

Vue에서 (클릭된 이미지를 확대/축소하기 위해) 모달 대화 상자에 이미지 src를 전달하려면 어떻게 해야 합니까?

클릭해서 이미지를 확대하려고 합니다.그 아이디어는 다음과 같습니다.

• 이미지를 클릭합니다.
• 의 대화.width=85vw방금 클릭한 이미지와 함께 열립니다(이미지가 거의 전체 화면으로 표시됨).

클릭 시 이미지를 확대/축소할 수 있는 더 좋은 방법이 생각나지 않지만, 모달 대화 상자에서 여는 방법이 있습니다(더 쉬운 방법이 있으면 알려주세요.

코드:

 <v-dialog v-model="dialog" max-width="85vw" >
     <img :src="img1" alt="" width="100%" @click.stop="dialog=false">
 </v-dialog>
                
 <img :src="img1" width="500px"  @click.stop="dialog = true">
 <img :src="img2" width="500px"  @click.stop="dialog = true">
 <img :src="img3" width="500px"  @click.stop="dialog = true">

 export default {
     data() {
         img1: "../../src/assets/pexels-photo-373912.jpg",
         img2: "../../src/assets/pexels-photo-373912.jpg",
         img3: "../../src/assets/pexels-photo-373912.jpg"
     }
 }

문제는 클릭된 이미지가 대화 상자에 열리지 않고 하드 코딩된 이미지만 열린다는 것입니다. 이 예에서는 항상 열립니다.img1어떤 이미지를 클릭하든 상관없습니다.

나는 어떻게 통과해야 할지 모르겠다:src대화 상자에 동적으로 입력 -:src를 클릭합니다.

추신: v-dialog는 Vuetify.js 라이브러리의 컴포넌트입니다.

---

질문:.

• 분명히 더 좋은 방법이 있을까요?
• 그렇지 않은 경우 이 방법을 사용하여 모달 대화 상자에 클릭한 이미지를 표시하려면 어떻게 해야 합니까?

선택한 이미지를 고정할 변수가 필요합니다.이미지를 클릭하면 변수가 해당 이미지의 URL로 설정됩니다.대화 이미지를 클릭하면 변수가 설정 해제됩니다.

대화상자에 변수가 설정되면 표시되어야 하며, 그렇지 않으면 숨깁니다.

간단하게 하기 위해 실제 대화는 사용하지 않고 div만 사용합니다.이 대화 상자에는 이 대화 상자를 사용할 것 같습니다.v-model를 사용하는 것보다v-if나는 사용한다.

new Vue({
  el: '#app',
  data: {
    selectedImage: null,
    images: [
      'http://via.placeholder.com/400x300?text=image%201',
      'http://via.placeholder.com/600x400?text=image%202',
      'http://via.placeholder.com/500x500?text=image%203'
    ]
  },
  methods: {
    zoom(url) {
      console.log("Zoom", url);
      this.selectedImage = url;
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <div v-if="selectedImage" max-width="85vw">
    <img :src="selectedImage" alt="" width="100%" @click.stop="selectedImage = null">
    <hr>
  </div>

  <div v-for="url in images">
    <img :src="url" width="100px" @click="zoom(url)">
  </div>
</div>

페이지 전체에서 분산된 이미지를 클릭하여 속성을 정의하고 클릭 이벤트로 변경하려면

템플릿으로

 <v-dialog v-model="dialog" max-width="60%" @keydown.esc="cancel">
      <v-card>
        <v-img :src="pic" alt="" contain/>
      </v-card>
    </v-dialog>
  <v-img
      src="require(@/assets/clinic/1.jpeg)"
      alt=""
      contain
      @click="openPic(require('@/assets/clinic/1.jpeg'))"//this part is important you have to require image
   />

대본대로

data() {
    return {
      pic: "",
      dialog: false
    }
  },
  methods: {
    openPic(image) {
      this.dialog = true
      this.pic = image
    },
    cancel() {
      this.dialog = false
    }
  }

언급URL : https://stackoverflow.com/questions/48069232/how-to-pass-an-image-src-into-a-modal-dialog-in-vue-in-order-to-zoom-the-clicke