jQuery img 相对路径/src 使用~答案

【问题标题】：jQuery img relative path / src using ~jQuery img 相对路径/src 使用~
【发布时间】：2014-01-20 10:09:22
【问题描述】：

我正在开发 VS2010 asp.net MVC 项目，并使用以下 jQuery 调用动态更改图像/图标。

<div class="icon-button"><img src="~/Images/Umark_Icon.png" class="image-class" /></div>


<script>
$(document).on("click", ".iconl-button", function () {
       $(this).find('img').attr("src", "~/Images/Mark_Icon.png");
 });
</script>

或者我也尝试过

$(this).html('<img src="~/Images/Mark_Icon.png" class="image-class"/>');

如果图像 src 或整个图像被替换为带有“~/image_path”的相对路径，则它不适用于波浪号。

它仅适用于“../image_path”。

它不适用于“../../image_path”，我相信但不确定是因为图像文件夹的深度。

最后，我希望它与我认为最适合这种情况的“~/”选项一起工作。

请任何关于该主题的 cmet、建议和演示对我很有帮助。

谢谢。

【问题讨论】：

~/ 的意图是什么？相对于您当前路径的资源在哪里？
@Nucleon 如果我正确理解你的问题，资源是相对于我当前路径的“../../Images/Mark_Icon.png”。
所以要明确一点，有人会看到 sn-p 的 URL 是在 yourdomain.com/foo/bar 之类的地方，而图像位于 yourdomain.com/Images/Mark_Icon.png？浏览器中的相对路径基于 URL，而不是实际的文件路径。如果我上面的示例 URL 是正确的，那么“../../Images/Mark_Icon.png”是有效的并且可以工作。
@Nucleon 是的，它确实有效，但在本地主机上时路径是“../../Images/Mark_Icon.png”，但在 DEV 服务器上时它会更改为“../Images /Mark_Icon.png" 这就是我要解决的问题。

标签： jquery asp.net-mvc image relative-path tilde

【解决方案1】：

 var ImageURL = '<%=ResolveClientUrl("~/Images/Mark_Icon.png")%>';
 $(this).find('img').attr('src', ImageURL );

【讨论】：

很抱歉，我可能不够清楚，但我正在寻找一个 jQuery 解决方案，更重要的是，没有服务器调用会导致回发。谢谢。
感谢您的建议，但由于某种原因它在我的情况下不起作用。
它有什么作用？运行此程序时获得的链接是什么？
它在运行时某处中断 ...elem.setAttribute(name, value + "");... 在 jquery-1.8.3.js 中并显示以下错误消息“htmlfile : 无效参数。”
立即尝试...更新答案

【解决方案2】：

~/ 不是有效的 URL 路径。路径要么是绝对 URL，要么是相对 URL，才能在图像标签中发挥作用。据我所知，您有以下选择：

/foo - 相对于主机的根目录

foo 或 ./foo - 相对于当前 URL

//host.com/foo 或 protocol://host.com/foo - 绝对网址

http://url.spec.whatwg.org/

【讨论】：