Can I import "next/image" with a different name?-CodePudding

In one of my component, I need both of the followings:

import Image from 'next/image'; (which comes from NextJS)

Image() (which comes from TypeScript)

And those two are conflicting with each other.

Is it possible to give a different name to the next/image? I tried

import Image as image from 'next/image';

and

import {Image as image} from 'next/image';

But they didn't work.

CodePudding user response：

There are two ways:

// CommonJS style
const { default: NextImage } = require("next/image");

// ES module style
import NextImage from "next/image";

// alternatively
import { default as NextImage } from "next/image";