vue 구성 요소에 업로드된 이미지별로 이미지를 표시하는 방법

vue 구성 요소에 업로드된 이미지별로 이미지를 표시하는 방법

이런 내 코드:

<div id="app">
  <div v-for="item in items">
    <div v-if="!image">
      <h2>Select an image</h2>
      <input type="file" @change="onFileChange">
    </div>
    <div v-else>
      <img :src="image" />
      <button @click="removeImage">Remove image</button>
    </div>
  </div>
</div>

다음과 같은 데모 및 전체 코드: https://codepen.io/moschel26/pen/jwdMgp

5개의 입력 파일이 있다.I want the image on the input file 3 img only img 3 img. I want the image that Imput file 5 img 등 입력 파일에 이미지를 업로드하면 img 5 img에만 이미지가 표시됨.

내가 어떻게 그럴 수 있을까?

업로드된 이미지를 설정할 개체 배열을 만들어야 한다.

<div id="app">
  <div v-for="item in items">
    <div v-if="!item.image">
      <h2>Select an image</h2>
      <input type="file" @change="onFileChange(item, $event)">
    </div>
    <div v-else>
      <img :src="item.image" />
      <button @click="removeImage(item)">Remove image</button>
    </div>
  </div>
</div>

전체 예: https://codepen.io/emils/pen/VWgpaJ

참조URL: https://stackoverflow.com/questions/45071661/how-can-i-display-image-by-image-uploaded-on-the-vue-component