Как отобразить изображение аватара / миниатюры после его загрузки в Vue js (Element-ui)?

#html #vue.js #vuejs2 #element-ui #photo-upload

#HTML #vue.js #vuejs2 #element-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 изображение, но не может отобразить его после загрузки.
Может ли кто-нибудь помочь мне с этим? Когда-нибудь работал над этой проблемой.

1. Можете ли вы также добавить функцию «handleAvatarSuccess» к вопросу, чтобы лучше понять?

2. handleAvatarSuccess(res, file) { this.ImageUrl = URL.createObjectURL(file.raw); }, Это функция «handleAvatarSuccess». Надеюсь, это поможет.

3. ОК. можете ли вы также добавить блок html-кода image display в свой вопрос. чтобы я мог дать вам определенный ответ, основанный на вашей фактической реализации

Ответ №1:

Судя по содержимому handleAvatarSuccess, кажется, что оно устанавливает свойство ImageUrl. Я думаю, вам нужно использовать этот ImageUrl в качестве свойства:src .

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

Если это не сработает, вам может потребоваться проверить file , задано ли свойство где-либо, или также изменить его на ImageUrl .

1. Вышеупомянутое решение не работает. Изменение свойства файла на ImageUrl также не работает. Кроме того, я пытаюсь загрузить и отобразить изображение в диалоговом окне. Отличается ли отображение в диалоговом окне от выполнения его не в диалоговом окне?