NextImage erroring in ie11

Question

i use typescript, this is my package.json:

"dependencies": {
"@tailwindcss/typography": "^0.4.1",
"@webcomponents/shadydom": "^1.7.4",
"cookie": "^0.4.1",
"js-cookie": "3.0.0-rc.4",
"next": "11.1.2",
"next-seo": "^4.7.1",
"next-themes": "^0.0.14",
"postcss-custom-properties": "^12.0.0",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-import": "^14.0.2",
"postcss-nesting": "^8.0.1",
"react": "17.0.2",
"react-app-polyfill": "^2.0.0",
"react-dom": "17.0.2",
"react-markdown": "^6.0.2" }

next/image can work in chrome、firefox，but not show in ie11 , render result in ie11：

<div style="margin: 0px; overflow: hidden; display: inline-block; position: relative;
 max-width: 100%; box-sizing: border-box;">
       <div style="display: block; max-width: 100%; box-sizing: border-box;">
            <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==">
      </div>
      <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">
      <noscript>&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"/&gt;</noscript>
</div>

my code:

import { getMyMedia } from "@utils/medias"
import NextImage from "next/image"


const Image = ({img,...props})=>{
  const media = img

  const loader = ({ src }) => {
    return getMyMedia(src)
  }

    // The image has a fixed width and height
    if (props.width && props.height) {
      return (
        <NextImage loader={loader} src={media.url} alt={media.alternativeText || ""} {...props}  />
      )
    }

      // The image is responsive
  return (
    <NextImage
      loader={loader}
      layout="responsive"
      width={media.width}
      height={media.height}
      objectFit="contain"
      src={media.url}
      alt={media.alternativeText || ""}
    />
  )

}

export default Image

i found error in ie11 devTools，like this：

SCRIPT5022: Should not already be working.

what should ido

Answer 1

Use the library next-images. It has support for all formats. All you need to is specify its usage in your next.config.js file.

// next.config.js
const withImages = require('next-images')
module.exports = withImages() 

Package link