title: Running Flask locally. I want to display images based on names generated in JavaScript
body: <p>I am using d3 and Flask to display tree diagrams in my browser. The whole thing is stored and operated locally.</p>
  
  <p>I want to display a relevant image when the user hovers over each node in the tree diagram.</p>
  
  <p>For the JSON data that the tree diagram is based on, I am using url_for and my static folder, like this:</p>
  
  <pre><code>d3.json("{{ url_for('static', filename=json_data) }}", function(error, flare) {
      // Lots of code
  </code></pre>
  
  <p>The same thing for including the d3:</p>
  
  <pre><code>&lt;script src="{{ url_for('static', filename='d3.js') }}"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>However, when it comes to the images that I want to appear on hover, I am using data from the JSON to create the name of the image. Since this means using JavaScript variables rather than python ones, I can't see how to display it using url_for.</p>
  
  <p>As an alternative, I have tried using a range of different absolute and relative paths, but nothing has worked. I read something about Firefox not wanting to display local files, but surely that doesn't apply to things running off my computer? I can display lots of local files in my browser normally. Either way, I installed an add-on called LocalLink. This is the code I was trying to use with this method:</p>
  
  <pre><code>var img_path;
  d3.selectAll( ".node" ).on( "mouseover", function(d) {
    img_path = "{{ image_path }}" + d.name + ".png";
    document.getElementById('thumb').src=img_path;
    document.getElementById('thumb').style.display='block';
  </code></pre>
  
  <p>Here, the python image_path variable is something along the lines of r"file:///C:/Python27/my/app/folders/etc/"</p>
  
  <p>This almost works. The images don't appear on hover, but if I use Firebug and hover over the appropriate  tag in the HTML, the correct image does show up as a thumbnail next to my cursor.</p>
  
  <p>I have tried creating a simple HTML page with an image referring to a "file:///....." location. That works. This makes me think that it is Flask that is the problem with this method. It doesn't seem to have a problem with absolute paths for web locations (I have tested that, and it works), so I am guessing that Flask doesn't like absolute paths to local file locations.</p>
  
  <p>So, there are several possibilities for how this might be solvable:</p>
  
  <ul>
  <li>There is a way to use url_for with variables generated in the JavaScript.</li>
  <li>There is a way to pass information back to a python variable and use that in url_for.</li>
  <li>There is a way to get Flask to display those images using the "file:///....." format.</li>
  </ul>
  
  <p>Are there other ways?</p>
  
  <p>The only other option I have contemplated is moving the whole thing online. However, I'm not very familiar with Python hosting, and this application uses Twisted and PyQT. I've no idea how I would go about installing them on a server. I don't even know if what I've built would work online - can you use Twisted or PyQT on a live website? I only have a vague sense of what Twisted even does.</p>
  
  <p>If people think this is my best/only option, I will provide a detailed explanation of how my application works, but until that point I won't clutter things up.</p>