Resource interpreted as image but transferred with MIME type text/html - Magento

Question

I\'m getting below error when uploading a new product image for my Magento shop.

Resource interpreted as image but transferred with MIME type text/html


        

Answer 1

This might well occur if your image path is set incorrectly. For example relative to current directory "images/myimage.gif" vs relative to web root "/images/myimage.gif".

The reference to "text/html" might suggest you have an error being returned by the server.

Answer 2

One needs to serve the images with the proper MIME type -

Add this line into the .htaccess file (assuming it's apache2 httpd):

AddType image/gif .gif

hint: mod_rewrite might require an exclusion for images:

RewriteCond %{REQUEST_URI} !\.(png|gif|jpg)$
RewriteRule ...

... everything else might be 404 indeed.

Answer 3

For me my path was set incorrectly relative to the css file that was trying to pull the image from that triggered the error in the console.

I had to go out 2 directories and then into the one that had my image.The .. before the slash brings you out of a directory. Each . brings you out one more directory.

ex. url (../Folder/ImagesFolder/image.gif)

Answer 4

Maybe images didn't have read permission

I also got this problem, when i use TinyPNG to compress images, i got this error message "Resource interpreted as Image but transferred with MIME type text/html". Then i add images permission, it works.

Answer 5

After a lot of research, I have found the problem is caused by a combination of things resulting in the server not knowing what type of document it is and getting mixed up between encoding types such as UTF-8 (or something like that)

So, in .htaccess, change the comments round so you have the following, giving a default character set of UTF-8.

############################################
## Prevent character encoding issues from server overrides
## If you still have problems, use the second line instead

    #AddDefaultCharset Off
    AddDefaultCharset UTF-8

This stopped the correct error shown in google (thank you mr google): "resource interpreted as image but transferred with mime type text/html"

And the made the images show up in other browsers (where there was no error shown).

Answer 6

I had the same problem once, because of capitalization.

My Colleagues were working on a Mac and added some camel-cased files, but it showed up lowercased in CSS. This works fine on Mac, but I was working on Linux. Mac doesn't distinguish filenames having different cases but Linux does. Most servers out there run on Linux.

example:

epicimage.jpg !== EpicImage.jpg

Thanks to the Chrome Dev Tools, the problem could be found very easy. Simply clicking on the image url showed me our 404 page. Mystery solved :D