在Vue jsElement-ui中上传头像/缩略图图片后如何显示？

问题描述

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

                      <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的内容，似乎设置了imageUrl属性。我认为您需要将该imageUrl用作：src属性。

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

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