Cloudinary не загружает изображение в браузер и показывает пустое поле для изображения

Я должен загружать изображения с помощью cloudinary в моем приложении django, но они не загружаются в браузере. Хотя я могу загружать их из админки совершенно нормально. Проблема в том, что моя кнопка "выбрать файл" позволяет мне выбрать изображение, но оно не отображается в браузере. И когда я создаю сообщение, будь то обычное сообщение или с картинкой, появляется пустое поле, и я не могу избавиться от него. Я приложу скриншот для справки и покажу свой код. Извините, если мое объяснение непонятно, я все еще новичок.

<input type="file" id="img-select">
<script src="static/js/file.js"></script>

<script>
const imgInput = document.querySelector('#img-select')
const imgPreview = document.querySelector('.preview')
const pickerBtn = document.querySelector('.upload')

imgInput.addEventListener('change', function() {  
  const file = this.files[0]  
  if(!file) return  
  const reader = new FileReader()  
  reader.addEventListener('load', function() {  
   imgPreview.src = this.result  
  })  
  reader.readAsDataURL(file)  
})  
</script>

скриншот

Для дополнительной информации, это изображение было загружено через администратора. и это пустое поле в нижней части экрана является тем, с чем у меня проблемы

Вернуться на верх