How to hide the image untill i click the button show?

JavaScript
1 
<!DOCTYPE html>
<html>

<style>



</style>
<body>
<img src="http://www.edmdistrict.com/wp-content/uploads/2016/04/Sun-Smiling-Blue-Sky-Cartoon-Fotolia_9210923_XS.jpg" id="myP">

<button type="button" onclick="myFunction()">Hide content of p</button>
<button type="button" onclick="myFunction2()">show content of p</button>

<script>
function myFunction() {
  document.getElementById("myP").style.visibility = "hidden";
  
}
function myFunction2() {
  document.getElementById("myP").style.visibility="visible";
  
}
</script>

</body>
</html>
2

Give the image a style.

<img src="..." style="visibility: hidden;" >
3 
<button type="button" onclick="myFunction()">Hide content of p</button>
<button type="button" onclick="myFunction()">Show content of p</button>


<script>

document.addEventListener("DOMContentLoaded", function(){

     function myFunction(){
          const myImage = document.getElementById("myP");
          myImage.style.visibility = (myImage.style.visibility === "hidden") ? '' : "hidden"; 
     }

});

</script>