Vladimir  Mootin Vladimir Mootin - 14 days ago 6
ASP.NET (C#) Question

How to change img src in view MVC

This is my image:

<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 })'" />


this is the code of function that should change the image source:

function setStars(amount) {
if (amount > 0) {
document.getElementById("1star").src = "~/Content/Images/filledstar.png";
}
}


It changes but browser says, that it can't load the image. This is what browser shows after moving mouse to the pictures:

image of what browser shows

And this is picture of how images looked before moving mouse to them:

image with starts rendered

How should I change
src
property?

Answer

The problem is not with the src attribute. That is changed correctly to what you've set it to. The problem is that it's pointing to the wrong directory.

Assuming that you're using razor with your MVC solution try this out:

function setStars(amount) {
   if (amount > 0) {
     document.getElementById("1star").src = "@Url.Content("~/Content/Images/filledstar.png")";
   }
}