Why when img.src = "~/path/image.png", javascript automatically adds domain + path to the controller?

Volk Volk 401 Reputation points


I have an image on my page:

<img src="~/Images/data_600x400.png" class="effect">

When I set the mouse over the box, this image appears on the scene and the src changes in it:


	let A = document.querySelector('.box');
	let B = document.querySelector('.effect');

	A.onmousemove = () =>{

		var path = INFO.getAttribute('data-src'); // INFO - just an object which contains path
		alert(path); // see alert 0

		B.src = path;
		alert(B.src); // see alert 1




Also, the browser console of course informs me about an error - there is no such image:

Why does javascript add the domain and the path to the controller to the src without my permission?
How do I pass the original string to src without domain and controller?


A set of technologies in the .NET Framework for building web applications and XML web services.
3,787 questions
JavaScript API
JavaScript API
An Office service that supports add-ins to interact with objects in Office client applications.
757 questions
{count} votes

Accepted answer
  1. Bruce (SqlWork.com) 49,051 Reputation points

    the browser supports releative urls, that is if the path does not contain the protocol, it uses the page protocol, if it does not contain the domain name it uses the current page domain. it also supports the ".." path operator. if the relative path start with / then only the protocol, domain and port are defaulted.

    in your case the default path is:


    in your javascript you set the <img> src to

    "-/Images/Big/theme_600x400_art_ images_icons.png"

    as this is a relative path, the browser appends it to the default path. if you used

    "/Images/Big/theme_600x400_art_ images_icons.png"

    the browser would have produced:

    "https//localhost:44382/Images/Big/theme_600x400_art_ images_icons.png"

    the mvc tag helpers modify url path strings that start with ~ to be a relative path which included the subsite path. as you used the attribute on a non-url attribute (data-src) it was not modified.

2 additional answers

Sort by: Most helpful
  1. AgaveJoe 1,500 Reputation points

    It is very difficult to help when we have no idea what type of project you've built and you do not provide all the code.

    The "~" is a server side construct which means from the application root. Typically when you see the "~" in the rendered HTML, that means there is a bug somewhere. If you are using "~" in JavaScript then change the "~" to a slash; "/".

    You've tagged this question as ASP.NET Core, so below is an ASP.NET Core MVC example.

        ViewData["Title"] = "Index";
        <img id="image" src="~/images/guitar_PNG3362.png" />
    @section scripts {

    The HTML generated by the above img tag is...

    <img id="image" src="/images/guitar_PNG3362.png">

    Notice the forward slash that starts the src path. The forward slash means from the application root.


    The JavaScript displays...


    If you need community debugging support, then share all the relevant code and tell us what kind of project you are building.

    0 comments No comments

  2. Volk Volk 401 Reputation points

    Good! Thanks! I can use an absolute path, but who and where and on what basis is /Custom/Home inserted into the path? This is already some kind of lawlessness. )