In my TypeScript setup, here is a snippet from my package.json file:
"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" }
While next/image works smoothly in Chrome and Firefox, it fails to display in IE 11. The rendering output in IE 11 looks like this:
<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><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"/></noscript>
</div>Here's the relevant piece of 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 ImageI encountered an error in IE 11 DevTools, which looks like this:
SCRIPT5022: Should not already be working.
Any suggestions on how to fix this?