reactjs - Image doesn't show up in react JS and CSS

Question

I wrote this code in VSCODE and I'm trying to show an image which is clipped as a circle, the overflow of the image will be hidden by the circle. But image does not show up. Browser doesn't provide any error as well. image path is correct as it doesn't throw any errors. If you need any further info, I'll add them.

CSS

 .Pic {
    clip-path: circle(150px at center);
}

React JS

</section> 
<div classname ="Pic">
      <img  width = "150px" height ="150px" src={require("./Assets/profpicjpg.jpg")} alt="" ></img>
      </div>
</section>

Answer 1

Put default after the require as below:

<img  className="Pic"  width = "150px" height ="150px" src={require("./Assets/profpicjpg.jpg").default} alt="" ></img>