HTML code messing following URLs

Question

I'm using Visual Studio 2012 for an MVC web app using code first method with EF 5.0. I have written the following code to make a modal window appear at some point:

<div id="mod" style="display:none;">
    <div id="mod-container">  
        <div id="mod-close"><img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/></div>   
        <div id="mod-content"></div>
    </div>
</div>

If works fine, exept that the image <img src="~/Content/icons/close.png" [...] /> cannot be found by the browser which thinks its URL is

http://localhost:49895/Class1/Home/~/Content/icons/close.png

To be precise, every code under my div's got broken URL. If I put my image above the div's it's displaying correctly with the following URL:

http://localhost:49895/Content/icons/edit.png

Do you have an idea where i messed things up?

Edit2: example (after problem being resolved)

This works:

<img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/>
<!-- comment containing a quote ' -->
<div id="mod" style="display:none;">
    <div id="mod-container">  
        <div id="mod-close"></div>   
        <div id="mod-content"></div>
    </div>
</div>

This doesn't work:

<!-- comment containing a quote ' -->
<div id="mod" style="display:none;">
    <div id="mod-container">  
        <div id="mod-close"></div>   
        <div id="mod-content"></div>
    </div>
</div>
<img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/>

Answer 1

Could be a bug in the new Razor 2.0 tilde parsing, or you've mucked up your html by missing a quotation mark or something. Try using the more explicit way of resolving urls

<img src="@Url.Content("~/Content/icons/close.png")" />

If that works then it suggests a razor bug, if it doesn't then your html is probably broken somehow but the extra @ symbol may be enough for the parser to kick in and tell you what is wrong.

Answer 2

~ is an asp code element, not HTML. As such it doesn't get rendered by the HTML.

Try wrapping your src with @Url.Content

<img src="@Url.Content("~/Content/icons/close.png")" />