在Vue js（Element-ui）中上传后如何显示头像/缩略图？答案

【问题标题】：How to display an avatar/thumbnail picture after uploading it in Vue js (Element-ui)?在Vue js（Element-ui）中上传后如何显示头像/缩略图？
【发布时间】：2020-09-26 01:55:48
【问题描述】：

我目前正在上传一张图片，并在上传后将其显示为缩略图或头像。我写了下面的代码。它成功上传了它，但我无法在上传器的位置显示它。

                      <el-upload
                        class="styling-photo"
                        ref="upload"
                        action="#"
                        :auto-upload="false"
                        :show-file-list="true"
                        :on-success="handleAvatarSuccess"
                        > 
                        <img v-if="file" :src="file" alt="">
                          <i v-else class="abc"></i>
                      </el-upload>

在下图中，我已经上传了pic.jpg图片，但是上传后无法显示。有人可以帮我弄这个吗？从某个时候开始处理这个问题。

【问题讨论】：

您能否在问题中添加“handleAvatarSuccess”功能以便更好地理解？
handleAvatarSuccess(res, file) { this.imageUrl = URL.createObjectURL(file.raw); }，这是“handleAvatarSuccess”函数。希望这会有所帮助。
好的。您能否也将image display 的html 代码块添加到您的问题中。以便我根据你的实际实现给你一个明确的答案

标签： html vue.js vuejs2 element-ui photo-upload

【解决方案1】：

根据handleAvatarSuccess 的内容，它似乎设置了一个imageUrl 属性。我认为您需要将该 imageUrl 用作 :src 属性。

<img v-if="file" :src="imageUrl" alt="">

如果这不起作用，您可能需要检查是否在任何地方设置了 file 属性或将其更改为 imageUrl。

【讨论】：

上述解决方案不起作用。将文件属性更改为 imageURL 也不起作用。另外，我正在尝试在对话框上上传和显示图像。在对话框上显示与不在对话框上显示有什么不同吗？