Click here to Skip to main content
15,946,529 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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>

        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);


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.
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 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, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900