Click here to Skip to main content
14,270,447 members
Rate this:
Please Sign up or sign in to vote.
See more:
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.
Posted
Comments
F-ES Sitecore 24-Apr-18 4:15am
   
I don't think "~" is a valid HTML url, it is generally used in server-side code where asp.net converts it to the root of your site. Try using an actual relative path "images/paddlewheel.png" or "../images/paddlewheel.png" depending on where the images folder is in relation to the page. Or use an absolute path which starts with a slash "/images/paddlewheel.png" again changing to reflect your actual folder structure.
Jamie888 24-Apr-18 4:17am
   
Thank you sir. I have just found out too after reading some articles. This problem can be solved by changing the src from "~/images/paddlewheel.png" into "/images/paddlewheel.png"

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100