I’m having an issue with rendering background images referenced in my CSS.
The following is logged in the web inspector
Resource interpreted as Image but transferred with MIME type text/html.
The background image works fine locally - it’s only when it’s deployed to heroku that it’s not working.
I have my front-end assets in a /public dir.
app.use(express.static(path.join(__dirname, 'public’)));
I am using component to build up my frontend, so I’m referencing my built assets (CSS/JS) from public/build/ which is all working fine.
I’ve looked at express-setting-content-type-based-on-path-file? and How do I set a MIME type before sending a file in Node.js?, but have had no luck.
I’ve also looked at the res.set() api and tried to add this to my router.
// 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);
});
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.
In ‘Finder’ if I inspect the image - it’s says it’s kind is 'Alias'.
When you call res.send();, it's sending the literal value of whatever you pass to it. So in this case, you're sending the string 'my-image.png' to the client with Content-Type: image/png. To send the actual contents of my-image.png instead, you might look at using the res.sendfile() method.
Although I've had some great feedback from @mscdex - the issue is a result of the symlinks to background images that are created by component on heroku.