Problem loading images from static in a .js file

Question

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' %}");
    });
});

It works fine when I write it directly in my base.html file, but when I place it in an external .js file it fails to load images.

Scripts.js file loads but images do not.

base.html code:

<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>

Rory McCrossan · Accepted Answer · 2020-03-11 15:52:47Z

3

The problem is because the templating syntax you're using (ie. {% static 'images/user_selected.png' %}), will not be interpreted in a JS file.

To work around this you can put the image sources in data attributes on the img in the HTML which can then be read in the external JS, like this:

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>

answered Mar 11, 2020 at 15:52

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Markus Harkonnen Over a year ago

Works perfectly. Thank you!

Rory McCrossan Over a year ago

No problem, glad to help

Collectives™ on Stack Overflow

Problem loading images from static in a .js file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related