serve images with relative path inside js files in django

Question

Background:

my setting.py

STATIC_ROOT = ''
STATIC_URL = '/static/'
STATICFILES_DIRS = (
    ('assets/css','/var/www/mongo_conprima/static_files/css/'),
    ('assets/js','/var/www/mongo_conprima/static_files/js/') )
STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    #'django.contrib.staticfiles.finders.AppDirectoriesFinder',
#    'django.contrib.staticfiles.finders.DefaultStorageFinder',
)

I am able to server static file in template this way

<script src="{% static "assets/SlickGrid-master/lib/firebugx.js" %}"></script>

Problem: there are images inside my js files with relative paths which fail to load like this

/var/www/mongo_conprima/static_files/SlickGrid-master/slick.formatters.js:
   55  
   56    function CheckmarkFormatter(row, cell, value, columnDef, dataContext) {
   57:     return value ? "<img src='/images/tick.png'>" : "";
   58    }
   59  })(jQuery);

ERROR: I get following errors in console

GET http://127.0.0.1:8000/images/tick.png 404 (NOT FOUND) slick.grid.js:2567

glmvrml · Accepted Answer · 2014-02-25 11:02:12Z

2

You can probably use global variable in your template and use it in your js files

Template:

<html>
<script>
   var GLOBAL_PATH = '{{ STATIC_PATH }}'; 
</script>
</html>

JS:

return value ? "<img src='" + GLOBAL_PATH + "/tick.png'>";

answered Feb 25, 2014 at 11:02

glmvrml

1,6322 gold badges14 silver badges31 bronze badges

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

Comments

user133688 · Accepted Answer · 2014-02-25 09:51:35Z

0

Use the static tag inside your function as well, so the javascript should look like

function CheckmarkFormatter(row, cell, value, columnDef, dataContext) {
    return value ? "<img src='{% static "/images/tick.png" %}'>" : "";
}

The static tag will give you full the path to static file.

answered Feb 25, 2014 at 9:51

user133688

7,0943 gold badges23 silver badges38 bronze badges

1 Comment

Praveen Singh Yadav Over a year ago

I can not go on changing the urls in all js files

Aiky30 · Accepted Answer · 2017-09-29 08:15:23Z

0

A couple of solutions to this issue have been answered in the following question: https://stackoverflow.com/a/6574670/2487431

You can either add a config to the webserver that will invisibly redirect the paths to the correct static path or you can use the urls.py to add the redirect.

The link explains in depth how you can do this. Hopefully this helps someone in the future.

answered Sep 29, 2017 at 8:15

Aiky30

8907 silver badges14 bronze badges

Collectives™ on Stack Overflow

serve images with relative path inside js files in django

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related