Can't display Image in Image tag while using Next.js and material UI-CodePudding

I am trying to display images in my Next js project with Material UI here:

<Box display="flex" alignItems="center">
                <Image
                  src={'/images/Profile.svg'}
                  alt={'Thumbnail-alt'}
                  width={300}
                  height={160}
                  style={{ background: '#252525e6', borderRadius: '6px' }}
                />
              </Box>

But all it is showing is the alt tag of the image, not displaying the actual image.

I am using Material UI 5 and Nextjs 12 for this project. Thanks

CodePudding user response：

To load static images, first import the file. E.g import ProfileSvg from "/images/Profile.svg"

Then in your image.

<Image
        src={ProfileSvg}
        alt={"Thumbnail-alt"}
        width={300}
        height={160}
        style={{ background: "#252525e6", borderRadius: "6px" }}
      />