如何在视图 MVC 中更改 img src

Posted 2023-03-05

【中文标题】如何在视图 MVC 中更改 img src

【英文标题】：How to change img src in view MVC

【发布时间】：2017-04-09 03:59:46

【问题描述】：

这是我的图片：

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

这是应该改变图像源的函数代码：

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

它发生了变化，但浏览器说它无法加载图像。这是将鼠标移动到图片后浏览器显示的内容：

这是图像在将鼠标移动到它们之前的样子：

我应该如何更改src 属性？

【参考方案1】：

问题不在于 src 属性。这已正确更改为您设置的内容。问题是它指向错误的目录。

假设您在 MVC 解决方案中使用 razor，请尝试以下操作：

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

【参考方案2】：

您可以尝试将您的图像URL 基于当前 html 文件位置。实际上，在您的图像URL 中使用~，您假设它位于当前用户主文件夹下。但如果用户改变，~ 将指向新的用户主文件夹。

我建议你把src标签的当前值改成这样：

<pathOfHtmlFile>/Content/Images/filledstar.png

并将<pathOfHtmlFile>替换为您计算机上html文件所在的路径。

【讨论】：

我将其更改为"E:/Kursovoi/Super Backup/Eksperement c vistavleniem otsenok/WebApplication4/WebApplication4/Views/CreativeModels/Content/Images/emptystar.png"，但没有任何改变。我猜浏览器只能访问服务器上的图片，而我没有。而且我没有html文件，我有cshtml文件。

@VladimirMootin 这不是服务器问题，我尝试在我的电脑上重现该问题，但得到了预期的结果。您能否将浏览器控制台的输出添加到您的问题中？这可以帮助解决问题。