Meteor: Resource interpreted as Image but transfer

Question

I am using Meteor 0.5.2 and getting following warning in Chrome for each of images which have their src generated by a template helper:

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

In my template I defined the image like this:

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

I am using a template helper function to pull out the exact image name (e.g. "avatar.jpg") from Mongo. All images are visible and loaded correctly in browser.

When I type in the image name directly into template (hardcode image name) the warning disappears.

e.g.

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

Why do I keep getting this warning and what can I do about it?

Thanks, Vladimir

Answer 1

I was having a similar problem using the iron router package, although the images were not displaying at all. My images are in the public/ directory. They would display properly if I was using the url http://localhost:3000/tracker, but my page on path http://localhost:3000/tracker/item would not load images properly and gave me the aforementioned error.

I was using the following html:

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

When I added '/' before {{this.itemImage}} like this:

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

The image would load properly, and there would be no error.

Answer 2

This is the insecure content warning generated by Chrome, saying that the server is sending wrong or missing Content-type in HTTP header. Sometimes this also happens when loading custom Javascript or CSS, etc.

I have also experienced the same issue. Here, the browser expects Content-type: image/jpeg, but it is interpreted as text/html. Because you don't specified the content-type in your helper.

These are simply a type warnings that has no impact on running the application.

Answer 3

The value of {{userOwnerAvatar}} is not resolving correctly, which is why your browser is saying that "http://localhost:3000/images/" was interpreted as text/html (note the lack of the actual image filename in that URL). Fix your template helper :-)

Answer 4

I had a similar problem, as was able to resolve it by moving my img folder into the public folder of the Meteor project so it was served directly. My source url is still src="img/pic.png".

Answer 5

Related, though not specifically answering the issue above, I had a similar warning/error message. My CSS was like this:

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

Fixed it by changing it into (notice the quotes and the forward slash):

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

I don't know why the quotes and slash matter for Meteor (or Handlebars)...