Adding JavaScript variable to Django static url

Question

I am attempting to add a custom Javascript variable to my Django static url. Unfortunately, the below code is failing.

$(document).ready(function() {
  var randomNum = Math.floor((Math.random() * 12) + 1)
  var text = "{% static '5LW/images/slider/" + randomNum + ".1.jpg' %}"
  document.getElementById("headerImage").style.backgroundImage = url(text)
});

I receive the error:

--

**Error during template rendering**

Could not parse the remainder: ''5LW/images/slider/"' from ''5LW/images/slider/"'

var text = "{% static '5LW/images/slider/" + randomNum + ".1.jpg %}"

--

How would I go about fixing this?

thebjorn · Accepted Answer · 2019-06-26 09:18:46Z

1

Your error is because you're mixing " and ' when creating your text variable.

However, this can never work. The {% static ".." %} tag is executed by the server, and your javascript is executed (long after the server has finished processing) by the browser.

You might get this to work by using

var text = "{{ STATIC_URL }}/5LW/images/slider/" + randomNum + ".1.jpg";

(you might have to expose settings.STATIC_URL from your view to your template manually).

.. or perhaps:

var text = "{% static "5LW/images/slider/" %}" + randomNum + ".1.jpg";

edited Jun 26, 2019 at 9:18

answered Jun 26, 2019 at 9:08

thebjorn

27.6k12 gold badges107 silver badges152 bronze badges

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

8 Comments

CoopDaddio Over a year ago

Yes, just realised the error with the " and ', thankyou.

CoopDaddio Over a year ago

If this cannot work, what would be another way to achieve this?

thebjorn Over a year ago

I updated with a possible way to do it. In the olden days you could use {{ STATIC }} but I didn't find any references to it now...

CoopDaddio Over a year ago

Hi @thebjorn, I have managed to get the link working: background-image: {% static "5LW/images/slider/6.1.jpg" %}; But I am receiving this error: INVALID PROPERTY VALUE

thebjorn Over a year ago

sounds like you've put the {% static ..%} tag in a file that is not processed by the django template processor, e.g. directly in a .css file?

|

Collectives™ on Stack Overflow

Adding JavaScript variable to Django static url

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related