How to display an avatar/thumbnail picture after uploading it in Vue js (Element-ui)?

Question

I am currently working on uploading a picture and displaying it as a thumbnail or as an avatar after uploading it. I have written the below code. It successfully uploads it but I am having trouble displaying it in place of the uploader.

                      <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>

In the image below, I have uploaded the pic.jpg picture, but unable to display it after uploading it. Can someone help me with this? Working on this issue from sometime.

Answer 1

Going by the contents of handleAvatarSuccess, it seems it sets an imageUrl property. I think you need to use that imageUrl as the :src property.

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

If that doesn't work, you may need to check if the file property is set anywhere or change that to imageUrl as well.