如何显示上传到 vue 组件的图像？

Posted 2023-02-23

【中文标题】如何显示上传到 vue 组件的图像？

【英文标题】：How can I display image by image uploaded on the vue component?

【发布时间】：2017-12-17 16:57:59

【问题描述】：

我的代码是这样的：

<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 上。等

我该怎么做？

【参考方案1】：

您应该制作对象数组来设置上传的图像。

<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