Question

在我的PartialView中，我可以从我的内容文件夹中拖放并自动获取图片地址。

<div style="text-align:center">
    <img src="~/Content/information-button16.png"/>
</div>

该路径呈现为<img src="/MyProject/Content/information-button16.png"/>

现在我试图创建一个阻止消息，并希望添加一个等待光标，但这似乎不起作用，因为相同的代码生成一个不同的路径。

$('#tabs').block({
    message: '<h1><img src="~/Content/busy.gif") /> Just a moment...</h1>'
});

呈现网址为http://Myserver/MyProject/~/Content/busy.gif

询问 yesterday 之后。我可以解决它，

message: '<h1><img src="/MyProject/Content/busy.gif") /> Just a moment...

但是，如果发生这种变化，知道硬编码项目路径是一个坏主意。

那么在javascript中引用MVC路径的正确方法是什么？

Answer 1

解析网址

如果这不包含在外部Javascript文件中，您可以使用MVC中的Url.Content()帮助程序方法来解析相应的绝对URL：

$('#tabs').block({
    message: '<h1><img src="@Url.Content("~/Content/busy.gif")" /> Just a moment...</h1>'
});

考虑使用CSS方法

另一种更适用的方法可能是考虑使用CSS类来设置繁忙的动画。这将允许您在不显式调用每次的整个路径的情况下引用您的图像：

.busy {
    /* This URL will need to be relative to the location of the element within your CSS */
    background: url('~/Content/busy.gif');
    height: 16px;
    width: 16px;
    display: block;
}

然后只使用CSS声明而不是<img>标记：

$('#tabs').block({
    message: '<h1><i class='busy'></i> Just a moment...</h1>'
});

Answer 2

将'/'放在字符串的开头。没有〜/或../

document.getElementById('PhotoPerson').innerHTML = 
  '<img src="/Content/Images/UnknownPerson.png" class="img-center img-responsive img-thumbnail">';

如何在Javascript中引用MVC内容文件夹

2 个答案: