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

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          


        

Answer 1

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 2

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 3

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 4

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)...

Answer 5

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 :-)