Невозможно отобразить изображение с помощью JavaScript из Django Base

Я пытаюсь заставить логотип клиента загружаться, когда пользователь входит в мое приложение. Для этого я использую приведенную ниже функцию views для создания url логотипа:

Просмотров: 

def view_company_logo(request):

print("GETTING LOGO")

client = Client.objects.get(user=request.user)
logo = ""
try:
    logo = client.customer.first().logo.logo.url
    print("GOT LOGO")
    return JsonResponse({"logo": logo, "media_url": settings.MEDIA_URL}, safe=False)

except Exception as e:
    print(e)
    print(f'ERROR FOR LOGO {e}')

    return JsonResponse({"logo": logo}, safe=False)

Функция прикреплена по ссылке ниже:

url(r"^get/company_logo/$", views.view_company_logo),

Это вызывается в файле base.html для того, чтобы показать

  $(document).ready(function () {
  function get_company_logo() {
    console.log('HERE SEAN!!!!!!!');
    log('TEST');

    $.ajax({
      url: '/get/company_logo/',
      method: 'GET',
      success: function (data) {
        return create_image(data['logo'])





      },
      error: function () {
        console.log('HERE IS THE ERROR!!!')
        log('HERE IS THE ERROR!!!')
      },
    
    })
  }

  function create_image(logo) {
    document.getElementById("logo").src = logo;

  }


  get_company_logo()

Который соединяется с источником этого изображения, которое генерируется при загрузке страниц:

      <img class="img-square center" id="logo" alt="logo" style="opacity: 1" height="45" width="125">

Может ли кто-нибудь сказать мне, почему изображение не загружается? Кажется, что функция никогда не вызывается, и я не уверен, почему.

Вы передаете значение медиа URL. Для загрузки фотографии необходимо добавить media_root:

    logo = client.customer.first().logo.url
    print("GOT LOGO")
    return JsonResponse({"logo": logo + settings.MEDIA_URL}, safe=False)

Кроме того, лучше почистить свой код:

try:
    logo = client.customer.first().logo.url + settings.MEDIA_URL
    print("GOT LOGO")

except Exception as e:
    logo = ""
    print(e)
    print(f'ERROR FOR LOGO {e}')
finally:
    return JsonResponse({"logo": logo}, safe=False)

У вас несколько проблем в вашем Javascript. Единственное, что должно быть в функции "ready", - это вызов get_company_logo. Остальные функции могут быть определены напрямую.

Это работает для меня: 

<script src="https://code.jquery.com/jquery-2.2.4.js">
</script>
<script>
function get_company_logo() {
    console.log('TEST');

    $.ajax({
      url: '/get/company_logo/',
      method: 'GET',
      success: function (data) {
        return create_image(data['logo'])
      },
      error: function () {
        console.log('HERE IS THE ERROR!!!')
        log('HERE IS THE ERROR!!!')
      },
    
    })
}

function create_image(logo) {
  document.getElementById("logo").src = logo;
}

$(document).ready(get_company_logo);

</script>

<img class="img-square center" id="logo" alt="logo" style="opacity: 1" height="45" width="125">
Вернуться на верх