javascript - Retrieve proper path for dynamic image src assignment -

i understand there similar questions out there, none of them seem work me. have slider , image. when change value of slider, want image change well. here relevant pieces of javascript:

 var imagearray = ['face0.png', 'face1.png', 'face1.png', 'face2.png', 'face2.png', 'face3.png', 'face3.png', 'face4.png', 'face4.png', 'face5.png', 'face5.png'];  function slidervaluechange(value) {     //$('#painscaleimage').attr('src', '~/content/' + imagearray[value]); ***gets wrong path     //$('#painscaleimage').src('~/content/' + imagearray[value]); ***jquery has no method called .src()     //document.getelementbyid('painscaleimage').src = '~/content/' + imagearray[value]; ***gets wrong path     //these commented out because failed work } 

my images located in project under content/face0.png, content/face1.png, etc. views located in views/home/view.cshtml. problem when called $(...).attr() , document.getelementbyid(...).src functions, browser looked images under /home/~/content/face0.png instead of looking under content/face0.png. reason assumed use ~/content/face0.png because if declare images in html, image in right place <img src="~/content/face0.png" />. how can achieve trying do? going wrong?

got it, root relative paths correct answer solution. (start path /).