Add image upon button click

See more:

Javascript

HTML

Hi I have a CSHTML view in which i would have a button that will add/create an image upon click. I have some simple cshtml codes and scripts that will handle that. But weird thing is every time i click the button, an empty image will get created instead. I have tried to change my script to create button instead and it works. Below are my codes:

<div id="main">
    <button onclick="addimage();">Add</button>
</div>

<script>
        function addimage() {
        var img = document.createElement("img");
        img.src = "~/images/paddlewheel.png";
        img.height = 60;
        img.width = 60;

        var class_name = "gif";
        img.setAttribute("class", class_name);

        document.getElementById("main").appendChild(img);
    };
</script>

What I have tried:

1. Search online for alternative but to no avail.
2. Change from create image into button. Button works but not image.