具有Url.Content的javascript路径

Question

我试图在我的项目中使用javascript获取图像的标准路径，我将src用于图像如下

document.testImg.src = '../Images/test.png';

我们是否可以像下面这样使路径保持一致？

document.testImg.src = '@Url.Content(~/Images/test.png)';


<img name="testImg">

提前致谢

Answer 1

您可能知道，除非该脚本是Razor视图的一部分，否则无法在Javascript中使用Razor。 这不是“最简单”的方法，但是一种解决方法是在布局视图/母版页中具有“全局” javascript URL变量。

例如，在共享布局中，您将有一个变量：

var AppUrl = '../Content/Images/';

因此，在所有视图中，您都可以使用以下一致变量：

var myImageUrl = AppUrl + 'image.jpg';

ps不想使用变量？ 将功能粘贴在共享视图中：

例如，在共享布局中，您将具有以下功能：

function AppURL(url)
{
 return '../Content/Images/' + url;
}

因此，在所有视图中，您都可以使用以下命令：

var myImageUrl = AppUrl('image.jpg');

Answer 2

我为此找到了一个很好的解决方案。 我将t4mvc用于我的项目，并更新了所有魔术字符串。 我认为该解决方案对很少遇到路径问题的开发人员很有用。

Answer 3

这样，我们可以使用Url.Content()添加的一些示例代码可能会对其他人有所帮助。

<p>This link goes to my `<a href="@Url.Content("~/")">`Application home page</a>.</p>

<p>Now let’s link to a view `<a href="@Url.Content("~/Controller/Action")">`in the Controller/Action directory</a>.

Url.Content("~/img/myImage.png")

<img src= "@Url.Content(Model.ImagePath)" alt="Sample Image" style="height:50px;width:100px;"/>