title: Express: Incorrect MIME type for background images
body: <p>I’m having an issue with rendering background images referenced in my CSS.</p>
  
  <p>The following is logged in the web inspector</p>
  
  <pre><code>Resource interpreted as Image but transferred with MIME type text/html.
  </code></pre>
  
  <p>The background image works fine locally - <strong>it’s only when it’s deployed to heroku that it’s not working</strong>.</p>
  
  <p>I have my front-end assets in a <code>/public</code> dir.</p>
  
  <pre><code>app.use(express.static(path.join(__dirname, 'public’)));
  </code></pre>
  
  <p>I am using <a href="https://github.com/component/component" rel="nofollow noreferrer">component</a> to build up my frontend, so I’m referencing my built assets (CSS/JS) from <code>public/build/</code> which is all working fine.</p>
  
  <p>I’ve looked at <a href="https://stackoverflow.com/questions/7109732/express-setting-content-type-based-on-path-file">express-setting-content-type-based-on-path-file?</a> and <a href="https://stackoverflow.com/questions/11971918/how-do-i-set-a-mime-type-before-sending-a-file-in-node-js">How do I set a MIME type before sending a file in Node.js?</a>, but have had no luck.</p>
  
  <p>I’ve also looked at the <a href="http://expressjs.com/api#res.set" rel="nofollow noreferrer">res.set() api</a> and tried to add this to my router.</p>
  
  <pre><code>// referencing my image build/background/images/my-image.png
  
  app.get('/build/background/images/:file', function(req, res) {
    res.set('Content-Type', ‘image/png’);
    res.send(req.params.file);
  });
  </code></pre>
  
  <p>The above has in fact changed the content type from ‘text/html’ to ‘image/png’, however the image does not display locally or on heroku. 
  The thumbnail is also broken in web inspector, yet the path to the image is correct.</p>
  
  <p>In ‘Finder’ if I inspect the image - it’s says it’s kind is 'Alias'.</p>