Meteor：资源解释为图像，但使用 MIME 类型 text/html 传输答案

【问题标题】：Meteor: Resource interpreted as Image but transferred with MIME type text/htmlMeteor：资源解释为图像，但使用 MIME 类型 text/html 传输
【发布时间】：2012-12-20 11:59:01
【问题描述】：

我正在使用 Meteor 0.5.2 并在 Chrome 中为每个由模板助手生成其 src 的图像收到以下警告：

Resource interpreted as Image but transferred with MIME type text/html:
"http://localhost:3000/images/". domutils.js:126

在我的模板中，我这样定义图像：

<img src="images/{{userOwnerAvatar}}" alt="" width="32" height="32" />

我正在使用模板辅助函数从 Mongo 中提取准确的图像名称（例如“avatar.jpg”）。所有图像在浏览器中都可见并正确加载。

当我直接在模板中输入图像名称（硬编码图像名称）时，警告消失了。

例如

<img src="images/avatar.jpg" alt="" width="32" height="32" />

为什么我不断收到此警告，我该怎么办？

谢谢，弗拉基米尔

【问题讨论】：

我已经得出结论，由于某种原因，直接在模板中插入图像文件名在 Meteor 中是不明智的，所以现在我的辅助函数输出完整的图像标签。当我的辅助函数输出整个图像标签时，所有警告都会消失。
另外，在处理扩展 Meteor.user() 时，我必须检查是否例如avatar 字段存在（通过使用 if ('avatar' in Meteor.user())）。 Meteor 似乎两次调用我的函数，第一次调用我的函数，例如Meteor.user().avatar 出于某种原因返回“未定义”。

标签： meteor handlebars.js

【解决方案1】：

我在使用 Iron 路由器包时遇到了类似的问题，尽管图像根本没有显示。我的图像在 public/ 目录中。如果我使用 url http://localhost:3000/tracker，它们会正确显示，但我在路径 http://localhost:3000/tracker/item 上的页面无法正确加载图像并给我上述错误。

我使用的是以下 html：

<img src="{{this.itemImage}}" alt="{{this.itemName}}">

当我像这样在{{this.itemImage}} 之前添加“/”时：

<img src="/{{this.itemImage}}" alt="{{this.itemName}}">

图片会正常加载，不会出错。

【讨论】：

【解决方案2】：

我遇到了类似的问题，因为能够通过将我的 img 文件夹移动到 Meteor 项目的公用文件夹中来解决它，以便直接提供它。我的来源网址仍然是src="img/pic.png"。

【讨论】：

【解决方案3】：

相关，虽然没有具体回答上述问题，但我收到了类似的警告/错误消息。我的 CSS 是这样的：

.myClass a{
    background: url(my-image.png) top left no-repeat;
}

通过将其更改为修复它（注意引号和正斜杠）：

.myClass a{
    background: url('/my-image.png.png') top left no-repeat;
}

我不知道为什么引号和斜线对 Meteor（或 Handlebars）很重要...

【讨论】：

【解决方案4】：

这是 Chrome 生成的不安全内容警告，表示服务器在 HTTP 标头中发送错误或缺少 Content-type。有时在加载自定义 Javascript 或 CSS 等时也会发生这种情况。

我也遇到过同样的问题。在这里，浏览器需要Content-type: image/jpeg，但它被解释为text/html。因为您没有在助手中指定content-type。

这些只是一个类型警告，对运行应用程序没有影响。

【讨论】：

我的辅助函数只返回图像文件名——图像不保存在数据库中，而是保存在 /images/ 文件夹中的文件系统中。

【解决方案5】：

{{userOwnerAvatar}} 的值没有正确解析，这就是为什么您的浏览器说“http://localhost:3000/images/”被解释为 text/html（请注意缺少实际图像该 URL 中的文件名）。修复你的模板助手:-)

【讨论】：

我可以在浏览器中正确看到图像，并且 Chrome 中的 Inspect 元素正确显示图像 url () 启动流星应用程序时，我可以看到“找不到图像”图标一瞬间，然后实际图像替换它。就像我的辅助函数在模板渲染之前没有返回图像名称一样。我将进一步调查这个问题。
我已经得出结论，由于某种原因，直接在模板中插入图像文件名在 Meteor 中是不明智的，所以现在我的辅助函数输出完整的图像标签。当我的辅助函数输出整个图像标签时，所有警告都会消失。
@Rahul 如何在模板助手中指定 mime 类型？
@AndersVindberg 不确定您的意思，您为什么要这样做？
@Rahul 为了避免 Chrome 中的错误消息。是不是因为图像 url 是 reactivly 生成的，然后 Chrome 有一个空 url 直到内容加载！¿ Thx.