Image not showing in Chrome

Question

I am attempting to set the source of an image. The image shows up correctly in IE and Firefox, but it doesn't show in Chrome. The error message that shows up in the console is: "Resource interpreted as image but transferred with MIME type text/html."

ColdFusion.Window.show('loading');
image = <cfoutput>#randrange(1,numImages)#</cfoutput>;
document.getElementById("loadImg").src = "./images/loading" + image + ".gif";           
setTimeout('document.images["loadImg"].src = "./images/loading" + image + ".gif"', 100);

I imagine I have to change the MIME type, but I have no idea how to go about doing this. What do I have to change for this to work in Chrome?

Answer 1

Well, the error message describes the problem exactly. Apparently other browsers have less problems with an image served with an incorrect MIME type, but Chrome doesn't like it.

This is almost certainly a server side error. Are the images you want generated dynamically, like using a PHP script?

Answer 2

I'm guessing the text/html mime type is because the image URL is returning a 404 page. Try it without the dot in the path:

document.getElementById("loadImg").src = "images/loading" + image + ".gif";

Answer 3

I would use the Developer Tools (Ctrl-Shift-I) and examine the src attribute that you're assigning. Once you get that URL, give it a try to see if you're actually getting an image. As others have said, you may be getting a 404. The URL may not be formed exactly as you intend.

Answer 4

IF you know that the image exists at that location then the webserver's mime-types are likely mis-configured for .gif. Should be image/gif looks like it is text/html.