Wie Referenz MVC Inhalt Ordner in Javascript

Question

In meiner PartialView kann ich Drag & Drop aus meinem Ordner Content und bekommen Bild Adresse automatisch.

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

dieser Weg machen als <img src="/MyProject/Content/information-button16.png"/>

Im jetzt eine Block-Nachricht zu erstellen versuchen und will einen Warte Cursor hinzufügen, aber dies scheint nicht zu arbeiten, weil der gleiche Code, einen anderen Weg zu generieren.

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

Die Render-URL ist http://Myserver/MyProject/~/Content/busy.gif

Nach fragen yesterday darüber. Ich könnte es beheben,

Aber wissen, ist eine schlechte Idee hart Code der Projektpfad für den Fall, dass sich ändern.

Also, was ist der richtige Weg, um den MVC-Pfad in Javascript zu verweisen?

Answer 1

die URL auflösen

Wenn dies nicht innerhalb einer externen Javascript-Datei enthalten sind, könnten Sie die Url.Content() Hilfsmethode in MVC verwenden Sie die entsprechende absolute URL zu beheben:

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

Betrachten Ein CSS-Ansatz

Ein anderer besser anwendbarer Ansatz könnte die Verwendung einer CSS-Klasse sein, um Ihre BU zu setzen sy Animation. Auf diese Weise können Sie Ihr Bild verweisen, ohne explizit den gesamten Pfad der es jedes Mal aufrufen:

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

und dann nur die CSS-Deklaration verwenden, wie zu einem <img> Tag Gegensatz:

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

Answer 2

put the '/'am Anfang der Zeichenfolge. nein

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