具有Url.Content的javascript路径

Question

I am trying to get standard path with javascript for images in my project I used src for image as below

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

Do we have any option like below to make path consistent?

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


<img name="testImg">

Thanks in advance

Answer 1

As you probably know you can't use Razor in Javascript unless that script is part of the Razor view. It's not the "sexiest" way but one way out is to have a "global" javascript URL variable in your Layout View/MasterPage.

for example in your shared layout you'll have a variable:

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

so then in all your views you can use this consistent variable:

var myImageUrl = AppUrl + 'image.jpg';

ps Don't want to use variables ? Stick a function in your shared view instead:

For example in your shared layout you'll have a function:

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

so then in all your views you can use this:

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

Answer 2

I found a good solution for this. I used t4mvc for my project and updated all my magic strings. I thought this solution would be useful for few developers who have issues with paths.

Answer 3

This way we can use Url.Content() few example code i added that may help others.

<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;"/>