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

Question

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

                      <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图片，但是上传后无法显示。有人可以帮我弄这个吗？从某个时候开始处理这个问题。

Answer 1

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

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

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