如何显示上传到 vue 组件的图片?
How can I display image by image uploaded on the vue component?
我的代码是这样的:
<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个输入文件。我想当我在输入文件 3 上上传图像时,图像仅显示在 img 3 上。当我在输入文件 5 上上传图像时,图像仅显示在 img 5 上。等等
我该怎么做?
你应该制作对象数组来设置上传的图片。
<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>
我的代码是这样的:
<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个输入文件。我想当我在输入文件 3 上上传图像时,图像仅显示在 img 3 上。当我在输入文件 5 上上传图像时,图像仅显示在 img 5 上。等等
我该怎么做?
你应该制作对象数组来设置上传的图片。
<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>