Проблема при загрузке изображений из stati c в файл. js - PullRequest
Новая
       1

Проблема при загрузке изображений из stati c в файл. js

1 голос
/ 11 марта 2020

scripts. js code: 

$(document).ready(function(){
    $('#user').hover(function() {
        $('#user img').attr('src', "{% static 'images/user_selected.png' %}");
    }, function() {
        $('#user img').attr('src', "{% static 'images/user.png' %}");
    });
});

Работает нормально, когда я записываю его непосредственно в файл базы. html, но когда я помещаю его во внешний файл. js не удается загрузить изображения.

Сценарии. js файл загружается, а изображения - нет.

база. html код: 

<head>
    ...
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="{% static 'js/scripts.js' %}"></script>
    ...
</head>
<body>
    ...
    <a href="{%url 'logout' %}">LOG OUT</a>
    <a id="user" href="#">
        <img src="{% static 'images/user.png' %}" />
        <span id="user-name">{{request.user.username}}</span>
    </a>
    ...
</body>

1 Ответ

3 голосов
/ 11 марта 2020

Проблема в том, что используемый вами синтаксис шаблонов (ie. {% static 'images/user_selected.png' %}) не будет интерпретироваться в файле JS.

Чтобы обойти это, вы можете поместить изображение источники в атрибутах data в img в HTML, которые затем могут быть прочитаны во внешнем JS, например: 

jQuery($ => {
  $('#user').hover(function() {
    $(this).children('img').prop('src', function() {
      return $(this).data('over');
    });
  }, function() {
    $(this).children('img').prop('src', function() {
      return $(this).data('leave');
    });
  });
});

<a id="user" href="#">
  <img src="{% static 'images/user.png' %}" data-over="{% static 'images/user_selected.png' %}" data-leave="{% static 'images/user.png' %}" height="14px" width="14px" id="user-icon" />
  <span id="user-name">{{request.user.username}}</span>
</a>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...