IE11 Not Displaying Image With Object Tag Through Web Server But Fine Locally

StackOverflow https://stackoverflow.com/questions/23145668

Question

Issue: When viewing an image setup as data through an object tag, Internet Explorer 11 does not display it when viewing through the web server. Here is the entire code:

<!DOCTYPE html>
<html>
<head></head>
<body>
<div style="width:200px; height:100px"><img src="../../square.svg"/></div>
<div style="width:200px; height:100px"><embed src="../../square.svg"></div>
<div style="width:200px; height:100px"><object data="../../square.svg" type="image/svg+xml">Nope</object></div>
</body>
</html>

For Firefox 28/Chrome 34, all 3 squares will show up if I go to the URL of that document OR open the document locally. For Internet Explorer 11, the squares will all appear when viewed locally. When viewing through the web server, only the first two squares will appear. For the third I get "Nope". I did try using a .png to see if it was .svg related, but I had the same results. Finally, the network tabs of the developer tools of Firefox/Chrome show the GET returning an "svg" type, but IE developer tools shows it returned type "text/html" and aborted. Is it the web server, or something I am doing wrong?

To add a little more detail, I ran into this while trying to solve another problem. The end goal of all of this is to have external .svg images to fill their container (WITHOUT keeping their aspect ratio intact). Firefox seems to treat .svgs like normal images in the < img> tag and I can stretch them like normal. Chrome seems to want to keep their aspect ratio, and IE was a mess. I was hoping by converting them to < object> I could coerce the .svgs a little more, but I am not able to get to that point to test.

Edit: Well, I could not figure out the issue, but I did figure out a solution to my original goal. I am pulling the .svg images with an ajax request, modifying the viewBox/preserveAspectRatio/width and height attributes and then put the svg object inline. It is gross and really hurts me on the caching side of things, but it works for all the browsers I plan to support.

Request Header Success:

GET http://127.0.0.1/file/square.svg HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Referer: http://127.0.0.1/file/xxx/xxx/index3.html
Accept-Language: en-US
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko
Accept-Encoding: gzip, deflate
Host: 127.0.0.1
If-Modified-Since: Fri, 18 Apr 2014 03:31:10 GMT
DNT: 1
Connection: Keep-Alive
Pragma: no-cache
Cookie: vendor_session=xxx

Response Success:

HTTP/1.1 304 Not Modified
content-type: image/svg+xml; charset=UTF-8
last-modified: Fri, 18 Apr 2014 03:31:10 GMT
date: Sat, 19 Apr 2014 01:23:12 GMT
cache-control: private, must-revalidate, max-age=86400
expires: Thu, 01 Jan 1970 00:00:00 GMT
content-length: 0
server: Vendor Web Server/Version

Request Fail:

HEAD http://127.0.0.1/file/square.svg HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko
Host: 127.0.0.1
Content-Length: 0
DNT: 1
Connection: Keep-Alive
Pragma: no-cache
Cookie: vendor_session=xxx

Response Fail:

HTTP/1.1 405 Method Not Allowed
content-type: text/html; charset=UTF-8
date: Sat, 19 Apr 2014 01:33:01 GMT
cache-control: private, must-revalidate
expires: Thu, 01 Jan 1970 00:00:00 GMT
content-length: 839
server: Vendor Web Server/Version
Was it helpful?

Solution

The issue here is that IE issues a HEAD request to determine the content type of the target resource. Your server is configured to reject HEAD requests (which is a bad configuration) and thus it results in a HTTP error instead of the proper response.

You may be able to avoid this request by changing your tag thusly:

<object data="../../square.svg" classid="clsid:30590066-98b5-11cf-bb82-00aa00bdce0b" type="image/svg+xml">Nope</object>

...but I'd probably just reconfigure the server to not forbid the HEAD method.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top