title: How to change img src in view MVC
body: <p>This is my image:</p>
  
  <pre><code>&lt;img id="1star" src="~/Content/Images/emptystar.png" onmouseover="setStars(1)" onmouseout="setStarsBack()" onclick="location.href='@Url.Action("SetRating", "CreativeModels", new { id = GlobalVariables.CurrentBookId, rating = 1 })'" /&gt;
  </code></pre>
  
  <p>this is the code of function that should change the image source:</p>
  
  <pre><code>function setStars(amount) {
     if (amount &gt; 0) {
       document.getElementById("1star").src = "~/Content/Images/filledstar.png";
     }
  }
  </code></pre>
  
  <p>It changes but browser says, that it can't load the image. This is what browser shows after moving mouse to the pictures:</p>
  
  <p><img src="https://i.stack.imgur.com/ILzMO.png" alt="image of what browser shows"></p>
  
  <p>And this is picture of how images looked before moving mouse to them:</p>
  
  <p><img src="https://i.stack.imgur.com/sESHe.png" alt="image with starts rendered"></p>
  
  <p>How should I change <code>src</code> property?</p>