How can I display image by image uploaded on the vue component?
10,613
You should make array of objects to set uploaded images.
<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>
Full example here: https://codepen.io/emils/pen/VWgpaJ
Author by
Success Man
Updated on June 05, 2022Comments
-
Success Man almost 2 years
My code like this :
<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>
Demo and full code like this : https://codepen.io/moschel26/pen/jwdMgp
There are 5 input files. I want when I upload the image on the input file 3 then the image is only shown on the img 3. when I upload the image on the input file 5 then the image is only shown on the img 5. etc
How can i do that?