微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决在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图片,但是上传后无法显示。 有人可以帮我弄这个吗?从某个时候开始解决这个问题。

enter image description here

解决方法

按照handleAvatarSuccess的内容,似乎设置了imageUrl属性。我认为您需要将该imageUrl用作:src属性。

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。