I am creating a website in next js. I used Image tag for placing the images in the website. I am getting some white space in the image components only in mobile view but in desktop it was coming fine ,when I checked in network tag i am getting svg xml type of file like this data:image/svg xml base 64 I am thinking this svg xml created the white space in the images? can anyone help me in this? how can I remove this svg xml type of file?

this is the html code i used for image :

 <div className={styles.card}>
  <div className={styles.content}>
    <div className={styles.image}>
      <Image
        src={image2}
        alt="picture"
        width={88}
        height={88}
       
        layout="intrinsic"
        quality={100}
      />
    </div>
    <h3>{title}</h3>
    <p>{description}</p>
  </div>
</div>

scss:

You can do the following

1. If you are using a dynamic image, you need to pass a url to the blurDataURL property explicitly. If you are using a static image, you don't need to provide anything.
2. If you don't need a placeholder, you can omit this prop and let it default to empty.