ASP .NET, MVC Razor - How to display image from script

Question

I am using mvc4, Razor and SignalR. Now in my cshtml. i have

<div>
<ul id="friends"></ul>
</div>

and within the script i have

$(function () {

//code omitted

// Reference the auto-generated proxy for the hub.
var chat = $.connection.chatHub;

chat.client.addfriend = function (name) {
// Add the message to the page.
$('#friends').append('<li><strong>' + htmlEncode(name)
+ '</strong> ' + getOnlineIcon() + '</li>');
};

function getOnlineIcon() {
return '<img id="img_logo" alt="test" src="~/Content/Images/greenDot.gif" />';
}
}

Issue is i tried everything, but it never shows the image only the alt text. If i put the same tag within the outside the script it works fine meaning the path is okay. Just that within the script it has an issue. tried the url.content on the src as well, but no luck. Any suggestions?

Answer 1

try using

@Url.Content("~/Content/Images/greenDot.gif")

like this..

function getOnlineIcon()
{
    return '<img id="img_logo" alt="test" src="' + 
        '@Url.Content("~/Content/Images/greenDot.gif")' + 
        '" />';
}

Answer 2

There is a problem in the src. Check the url

It might be

 src="/Content/Images/greenDot.gif"