Search code examples
imageinternet-explorernginxjpegmime-types

Image not displaying in IE only

I have an image tag

<img src="https://biossantibodies.com/image-raw/4449.jpeg">

Where it displays properly in Chrome/Firefox/Safari, but not IE.

Result

Fiddle link: https://jsfiddle.net/bheng/6z3u7dxm/

Chrome

enter image description here

IE

enter image description here

Console Error

enter image description here

Network Tab Result

enter image description here

How can I debug this?

Solution

  • set up the IE debugger to record console messages for blocked and insecure content... Tools>Internet Options>Advanced tab, check "Always record developer console messages". Save changes... now when you open the dev tool it will list any (otherwise) suppressed markup and blocked content warnings and messages.....

    While you are configuring Internet OPtions above, also make sure that your IE security zone settings are restored to the factory/company defaults... Security tab of Internet Options, click "Reset all zones to default". Settings for Multimedia and images ( elements) can be found on the Advanced tab of Internet Options Multimedia section and in the Security section on the Advanced tab of Internet Options, re: "Block unsecured images with other mixed content"

    To find out which IE security zone a domain is mapped to, when visiting the domain, select the File>Properties menu from IE.... it lists the IE security zone that the domain is mapped to.... If you have placed the domain in your Trusted, Intranet or Restricted sites list, remove it.... other browsers do not use the IE Security zone model (security by per site)... publicly accessible sites are/should be designed to work in web browsers to work in the browsers' default security zone/settings.

    You should also note the site specific settings for ActiveX filtering and Tracking Protection... you can turn those features on/off from the Tools menu in IE.

    To list the request and responses on the Networking tab, pin the dev tool to your browser tab, then click the Start button on the networking tab, and the button (looks like a floppy disk) to "Always refresh from server"..... without closing the dev tool.

    It is important that when debugging scripts on web pages that 1. you have configured the debug tab to "Break on all exceptions".... on the debug tab, select "Break on all exceptions" from the dropdown (looks like a Stop sign). 2. The dev tool MUST be open while you are debugging, so pin it to the bottom of the tab you are debugging.