Question

I am facing a weird problem just in chrome. I am getting an image from server which works fine in Firefox, but in chrome the image loads for once and then it shows as broken image.

In console of Chrome I am getting the following message :

Resource interpreted as Image but transferred with MIME type text/html: "http://46.137.249.133:8080/Smart/Request/query.htm?ReqType=SessionUnawareAttachmentDownloadReqType&Thumbnail=Yes&AttachmentRowID=344929138455741006"
GET http://46.137.249.133:8080/Smart/Request/query.htm?ReqType=SessionUnawareAttachmentDownloadReqType&Thumbnail=Yes&AttachmentRowID=344929138455741006  

I also checked the mime type, but its image/jpeg. Here is the output of getimagesize()

Array
(
    [0] => 289
    [1] => 202
    [2] => 2
    [3] => width="289" height="202"
    [bits] => 8
    [channels] => 3
    [mime] => image/jpeg
)

Answer 1

This is the output from curl --verbose <your-url> and you can see that you web server (on port 8080) is advertising the file as text/html.

< HTTP/1.1 200 OK
< Server: Apache-Coyote/1.1
[...]
< Content-Disposition: attachment; filename="Hall2.JPG"
< Content-Type: text/html;charset=ISO-8859-1

You can fix this by setting the correct Media Type by adding a Content-Type header line to each HTTP response.

In PHP, do it using header function, like:

header('Content-Type: image/jpeg');

It’s very similar for a Java Servlet page:

HttpServletResponse res;
res.setContentType("image/jpeg");