Question

我在渲染CSS中引用的背景图片方面存在问题。

以下内容记录在Web检查器

中

Resource interpreted as Image but transferred with MIME type text/html.

背景图片在本地工作正常 - 只有当它部署到heroku时它才能正常工作。

我的前端资产位于/public目录。

app.use(express.static(path.join(__dirname, 'public’)));

我正在使用component来构建我的前端，所以我从public/build/引用我的构建资产（CSS / JS），这一切都正常。

我看过express-setting-content-type-based-on-path-file?和How do I set a MIME type before sending a file in Node.js?，但没有运气。

我还查看了res.set() api并尝试将其添加到我的路由器中。

// 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);
});

以上实际上已将内容类型从“text / html”更改为“image / png”，但图像不会在本地或在heroku上显示。在Web检查器中也缩小了缩略图，但图像的路径是正确的。

在'Finder'中，如果我检查图像 - 它说它的类型是'Alias'。

Answer 1

当您致电res.send();时，它会发送您传递给它的任何文字值。因此，在这种情况下，您使用'my-image.png'将字符串Content-Type: image/png发送到客户端。要改为发送my-image.png的实际内容，您可以考虑使用res.sendfile()方法。

Answer 2

虽然我从@mscdex得到了一些很好的反馈 - 但这个问题是由component在heroku上创建的背景图片的符号链接的结果。

Express：背景图像的MIME类型不正确

2 个答案: