title: Electron: Trouble changing background-image to local file system image
body: <p>As the title says I'm having trouble changing the background-image of a div's css to point to a local file using JS or JQuery in an Electron app that I'm creating. </p>
  
  <p>The app is a image viewer that allows you to upload files to the application's appData directory on windows and then display those files. However i can't seem to change the background-image to point to the images in that directory correctly.</p>
  
  <p>For below the message variable is set elsewhere in the code basically by using the path function in nodejs. The code I have is like this:</p>
  
  <pre><code>document.getElementById('bg').style.backgroundImage = "url("+message+")";
  console.log(message);
  </code></pre>
  
  <p>Console output: </p>
  
  <pre><code>file:///C:\Users\me\AppData\Roaming\display\files\pirate-flag.jpg
  GET file:///C:/UsersmeppDataRoamingdisplay%0Filespirate-flag.jpg net::ERR_FILE_NOT_FOUND
  </code></pre>
  
  <p>I've also tried a number of variations on:</p>
  
  <pre><code>message = message.replace(/\\/,'\\\\');
  </code></pre>
  
  <p>the best i get is that the first "\" after the C: becomes double "\" but in the error message it goes back to "/".
  I also tried to change the background image using jquery but same exact problem.
  I also tried to use <code>escape(message);</code> before adding the <code>file:///</code> and that just messes up everything.</p>
  
  <p>If i set the path explicitly in the css it works fine - like: </p>
  
  <pre><code>background-image: url("file:///C:\\Users\\me\\AppData\\Roaming\\display\\files\\pirate-flag.jpg")
  </code></pre>
  
  <p>But I can't do this permanently as the image needs to change based on what the user clicks. I've looked all over but can't seem to find how to get this to work. Any suggestions?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I realized that the log output may also be formatted, so this is what show up on the element inspector after changing the css:</p>
  
  <pre><code>url("file:///C:Usersme\a ppDataRoamingdisplay\f ilespirate-flag.jpg")
  </code></pre>