How reference MVC content folder in Javascript

Question

In my PartialView I can drag and drop from my Content folder and get picture address automatic.

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

That Path render as <img src="/MyProject/Content/information-button16.png"/>

Now Im trying to create a block message and want add a waiting cursor but this doesnt seem to work, because the same code generate a different Path .

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

The render URL is http://Myserver/MyProject/~/Content/busy.gif

After ask yesterday about it. I could fix it,

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

But know is a bad idea hard code the project path in case this change.

So what is the correct way to reference the MVC path in javascript?

Rion Williams · Accepted Answer · 2016-07-11 14:30:26Z

1

Resolving the URL

If this isn't contained within an external Javascript file, you could use the Url.Content() helper method within MVC to resolve the appropriate absolute URL :

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

Consider a CSS Approach

Another more applicable approach might be to consider using a CSS class to set your busy animation. This will allow you to reference your image without explicitly calling the entire path of it each time :

.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;
}

and then just use the CSS declaration as opposed to an <img>tag :

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

answered Jul 11, 2016 at 14:30

Rion Williams

76.9k38 gold badges206 silver badges335 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Juan Carlos Oropeza Over a year ago

First aproach looks OK. Let me move everything to a external js and try second one too.

CelzioBR · Accepted Answer · 2017-10-30 17:03:42Z

0

put the '/' in the begin of string. no ~/ or ../

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

edited Oct 30, 2017 at 17:03

answered Oct 27, 2017 at 18:06

CelzioBR

1241 silver badge10 bronze badges

2 Comments

user6490462 Over a year ago

Please describe why your answer may solve the issue?

CelzioBR Over a year ago

Ops I forgot, Only put the '/' in the begin of string. no ~/ or ../

Collectives™ on Stack Overflow

How reference MVC content folder in Javascript

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related