title: NextImage erroring in ie11
body: <p>i use typescript, this is my package.json:</p>
  <pre><code>&quot;dependencies&quot;: {
  &quot;@tailwindcss/typography&quot;: &quot;^0.4.1&quot;,
  &quot;@webcomponents/shadydom&quot;: &quot;^1.7.4&quot;,
  &quot;cookie&quot;: &quot;^0.4.1&quot;,
  &quot;js-cookie&quot;: &quot;3.0.0-rc.4&quot;,
  &quot;next&quot;: &quot;11.1.2&quot;,
  &quot;next-seo&quot;: &quot;^4.7.1&quot;,
  &quot;next-themes&quot;: &quot;^0.0.14&quot;,
  &quot;postcss-custom-properties&quot;: &quot;^12.0.0&quot;,
  &quot;postcss-flexbugs-fixes&quot;: &quot;^5.0.2&quot;,
  &quot;postcss-import&quot;: &quot;^14.0.2&quot;,
  &quot;postcss-nesting&quot;: &quot;^8.0.1&quot;,
  &quot;react&quot;: &quot;17.0.2&quot;,
  &quot;react-app-polyfill&quot;: &quot;^2.0.0&quot;,
  &quot;react-dom&quot;: &quot;17.0.2&quot;,
  &quot;react-markdown&quot;: &quot;^6.0.2&quot; }
  </code></pre>
  <p>next/image can work in chrome、firefox，but not show in ie11 , render result in ie11：</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="margin: 0px; overflow: hidden; display: inline-block; position: relative;
   max-width: 100%; box-sizing: border-box;"&gt;
         &lt;div style="display: block; max-width: 100%; box-sizing: border-box;"&gt;
              &lt;img aria-hidden="true" style="margin: 0px; padding: 0px; border: currentColor; border-image: none; display: block; max-width: 100%;" alt="" 
  src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIvPg=="&gt;
        &lt;/div&gt;
        &lt;img style="margin: auto; padding: 0px; border: currentColor; border-image: none; left: 0px; top: 0px; width: 0px; height: 0px; right: 0px; bottom: 0px; display: block; position: absolute; min-height: 100%; max-height: 100%; min-width: 100%; max-width: 100%; box-sizing: border-box;" alt="" 
  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-nimg="intrinsic" decoding="async"&gt;
        &lt;noscript&gt;&amp;lt;img alt="" srcSet="http://89.99.249.122:37/uploads/realtec_type_white_7e5b583ded.png 1x, http://89.99.249.122:37/uploads/realtec_type_white_7e5b583ded.png 2x" src="http://89.99.249.122:37/uploads/realtec_type_white_7e5b583ded.png" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/&amp;gt;&lt;/noscript&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { getMyMedia } from "@utils/medias"
  import NextImage from "next/image"
  
  
  const Image = ({img,...props})=&gt;{
    const media = img
  
    const loader = ({ src }) =&gt; {
      return getMyMedia(src)
    }
  
      // The image has a fixed width and height
      if (props.width &amp;&amp; props.height) {
        return (
          &lt;NextImage loader={loader} src={media.url} alt={media.alternativeText || ""} {...props}  /&gt;
        )
      }
  
        // The image is responsive
    return (
      &lt;NextImage
        loader={loader}
        layout="responsive"
        width={media.width}
        height={media.height}
        objectFit="contain"
        src={media.url}
        alt={media.alternativeText || ""}
      /&gt;
    )
  
  }
  
  export default Image</code></pre>
  </div>
  </div>
  </p>
  <p>i found error in ie11 devTools，like this：</p>
  <p>SCRIPT5022: Should not already be working.</p>
  <p>what should ido</p>