Load multiple images with Javascript from Django backend

Question

I'm working on a d3 based visualization tool that allows users to click paths on images. That works all fine until I tried to let the user change the background image by a simple dropdown.

The problem was that javascript can not load files from the disk since to Cross-Origin permissions. So the solution I picked was to set up a backend. I choose Django.

This is the javascript code which manipulates the image:

window.LOADED_FILE = "PUT PATH HERE";

I have a working dropdown where the user can pick an image and I get then the path to the file. After this, I tried to load the image like the following.

window.SVG.append("image")
        .attr("width", window.WIDTH + "px")
        .attr("height", window.HEIGHT + "px")
        .attr("xlink:href", window.LOADED_FILE);

This doesn't work at all and I only get a placeholder image for the 404 Request. So tried to following two things:

First of all, this is a solution that I found here. This works fine, but I don't want and I cant hardcode every possible image into an HTML file just to pick the correct variable when the user wants to select another image them later when the user wants. So I need a more dynamic solution.
After this, I tried the following. But when I do console.log(DJANGO_STATIC_URL) I get a an empty log. In the settings.py file contains the following static url: STATIC_URL = '/static/'.

So what I want is a solution on how I should load images with javascript without hardcoding them in before in an HTML file. I suspect that I have misunderstood something or ignored something obvious.

Let me get this straight, so you want to be able to load all the images from the 'static' folder in the page, using JavaScript? — Dev Catalin
– Dev Catalin, Commented Oct 7, 2019 at 15:42
{{ STATIC_URL }} is only in the context if you have django.template.context_processors.static in your TEMPLATES context_processors options. — dirkgroten
– dirkgroten, Commented Oct 7, 2019 at 16:01
@CatalinHoha yes exactly, but I don't want to have in my HTML file all images as variables. There are other parts of the workflow which generates the images and put them in the static folder. — sebwr
– sebwr, Commented Oct 8, 2019 at 8:50
@dirkgroten It worked, with the flag I can access my static folder and build the complete path. Thanks a lot. — sebwr
– sebwr, Commented Oct 8, 2019 at 9:07

dirkgroten · Accepted Answer · 2019-10-08 09:31:54Z

1

{{ STATIC_URL }} is only in the context if you have "django.template.context_processors.static" in your TEMPLATES context_processors options in settings.py.

answered Oct 8, 2019 at 9:31

dirkgroten

20.8k2 gold badges32 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

Load multiple images with Javascript from Django backend

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related