1

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:

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

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

sebwr
  • 113
  • 1
  • 10
  • 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 Oct 07 '19 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 Oct 07 '19 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 Oct 08 '19 at 08:50
  • @dirkgroten I'll see if that helps me thank you. – sebwr Oct 08 '19 at 08:56
  • @dirkgroten It worked, with the flag I can access my static folder and build the complete path. Thanks a lot. – sebwr Oct 08 '19 at 09:07

1 Answers1

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.

dirkgroten
  • 20,112
  • 2
  • 29
  • 42