title: Electron: how to serve files from appdata
body: <p>I feel like this is such a basic question but I have been at it for hours and seem to be spinning around the answer.  I have an electron app which I also used create-react-app on.  I have image files in the appData folder for the electron app and I want to be able to display them in the renderer  (using react) using an img tag.</p>
  
  <p>I cannot seem to figure out how to do this.  Using an absolute path and file:// for the img src doesn't work.  I also tried to register a custom protocol but can't seem to get it to work, I just keep getting file not found (see below).  Any ideas or links would be appreciated.</p>
  
  <pre><code>  protocol.registerFileProtocol('poster', (request, callback) =&gt; {
      const url = request.url.substr(9)
      console.log(url);
      callback({path: app.getPath('appData')+'/posters/'+url})
    }, (error) =&gt; {
      if (error) console.error('Failed to register protocol')
    })
  </code></pre>
  
  <p>The image tag would look something like this:</p>
  
  <pre><code>&lt;img src='poster://test.jpg'/&gt;
  </code></pre>