javascript - 带有 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

您可能知道您不能在 Javascript 中使用 Razor，除非该脚本是 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;"/>