The tilde (~) in the one of the images doesn't get resolved - html

Question

This is a funny one.
I have a page using knockoutjs.
Everything works fine apart from one of the images in the page that doesn't show.
My HTML
<div class="cyclerItem"> #*Views and Visitors*#
<div class="cyclerFilter">
<img class="toggleImg" src="~/Content/imgs/City.png" width="30" height="30" />
</div>
<div class="cyclerFilterText">
<div>
<a id="modal-launcher4" > Business Unit </a>
<div id="modal-content4" class="arrow_box">
<div id="scroll4" class="scroll4">
<div id="container3column" >
<div id="primary1">
<p>Business Unit</p>
<ul>
<li>All</li>
</ul>
<ul data-bind="'foreach': businessUnits.businessUnitsList">
<li data-bind="'text': title, 'click': goToFunctions""></li>
</ul>
</div>
</div> #* Container ends*#
</div> #* scroll *#
</div> #*modul content 4 4 *#
</div>
</div> #* Cykler filter text*#
<div class="cyclerFilter">
<img class="toggleImg" src="~/Content/imgs/Globe_Alt.png" width="30" height="30" />
</div>
<div class="cyclerFilter">
<img class="toggleImg" src="~/Content/imgs/Globe_Alt.png" width="30" height="30" />
</div>
<div class="cyclerFilterText">
Geographies
</div>
</div>
My HTML rendered on the Client:
<div class="cyclerItem">
<div class="cyclerFilter">
<img class="toggleImg" src="/Content/imgs/City.png" width="30" height="30" />
</div>
<div class="cyclerFilterText">
<div>
<a id="modal-launcher4" > Business Unit </a>
<div id="modal-content4" class="arrow_box">
<div id="scroll4" class="scroll4">
<div id="container3column" >
<div id="primary1">
<p>Business Unit</p>
<ul>
<li>All</li>
</ul>
<ul data-bind="'foreach': businessUnits.businessUnitsList">
<li data-bind="'text': title, 'click': goToFunctions""></li>
</ul>
</div>
<div id="content1">
<p>Function</p>
<ul>
<li>All</li>
</ul>
<ul data-bind="'foreach': functions.functionsList">
<li data-bind="'text': title, 'click': goToDepartments"></li>
</ul>
</div>
<div id="secondary1">
<p>Department</p>
<ul>
<li>All</li>
</ul>
<ul data-bind="'foreach': departments.departmentsList">
<li data-bind="'text': title"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cyclerFilter">
<img class="toggleImg" src="~/Content/imgs/Globe_Alt.png" width="30" height="30" />
</div>
<div class="cyclerFilter">
<img class="toggleImg" src="/Content/imgs/Globe_Alt.png" width="30" height="30" />
</div>
<div class="cyclerFilterText">
Geographies
</div>
</div>
as you can see there only one small difference, one of the image have the source where the tilde (~) didnøt get resolved inot the right path.
It's only that one image in that position, if I change the source to another path it still does not work, but as you can see the next image is exactly the same but it works...
something to do with mvc messing around because of the knockout code?
Or maybe just a simple error in my html that make MVC get crazy? First coming first serving. :)

Answer 1

I actually found the problem. It's probably a pure HTML problem.
There is an extra double quote at the end of one attribute in a li tag. :)
I made some tests and it doesn't matter where but if any attribte in any tag as an extra double quote, that img stop working. I wonder why that img src and not something else.