0

I have created an image in my object so i can draw it to my canvas... I did it like this:

item[id].img = new Image();
item[id].img.src = './image_folder/'+data[i][j].image;

Then my canvas draws on this line:

canvas[2].ctx.drawImage(item[theID].imge, px, py);

It works fine but in Chrome console it says:

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

I'm curious what this actually means and how to correct it ?

Sir
  • 8,135
  • 17
  • 83
  • 146
  • The image either doesn't exist and you're getting the 404 page (probably not the case if you say it's working). Otherwise, your server is not using the correct mime type for the image file. You can probably ignore it, though. – Explosion Pills Feb 18 '13 at 04:29
  • What does it mean by mime type ? is that to do with properties of the image file? – Sir Feb 18 '13 at 04:42
  • 1
    http://en.wikipedia.org/wiki/Mime_type – Explosion Pills Feb 18 '13 at 04:42
  • Possible dupe with [Resource interpreted as image but transferred with MIME type text/html - Magento](http://stackoverflow.com/questions/8057030/resource-interpreted-as-image-but-transferred-with-mime-type-text-html-magento) – zs2020 Feb 18 '13 at 04:46

1 Answers1

0

When you request things from servers, they will send "headers" with whatever is being sent.

It's how browsers can figure out how to use video or music, or know what to do with JS or CSS.

Modern browsers are pretty intelligent about dealing with these things, but if you tried to send an .mp3 to a browser that doesn't know how to use .mp3s, it might try loading the file as text, and you'd get a lot of funny characters.

MIME types can avoid that, mostly. If you ask to download an .mp3, the server might send a header that looks like "Content-Type: audio/mpeg codecs=mp3".
A regular web-page, in comparison, would be sent as "Content-Type: text/html", while a .png image would be sent as "Content-Type: image/png".

If you're playing around on a test-server that you installed using a WAMP installer, or EasyPHP or whatever, your server probably doesn't know about serving .png files with the "image/png" MIME-type.

Intelligent browsers will read the contents of the file and try to figure out what they're supposed to be, if they're given the wrong MIME-type for the file (which is why your images work in the first place).

This particular error probably isn't going to hurt anyone (because browsers that can't figure out you've got a .png file are probably browsers that don't have <canvas>).
But to fix it in other cases (like .ogg files for <audio> and <video> support, which IS important), you should figure out what kind of server you're running (my money's on Apache), and figure out how to add mime-type and file-type declarations.

You could find that through a Google search like "add mime-types to apache".

If this is a server that's live on the internet, and you're paying for hosting, then you'll need to set it through your hosted site.

Norguard
  • 26,167
  • 5
  • 41
  • 49