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" }}
/>