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

Question

Hi!

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:

<script>

	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
	}

</script>

alert_0

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?

Thanks!

Answer 1

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:

"https//localhost:44382/Customer/Home/"

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.

Answer 2

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";

}

<h1>Index</h1>
<div>
    <img id="image" src="~/images/guitar_PNG3362.png" />
</div>

@section scripts {
    <script>
        console.log(document.getElementById('image').src);
    </script>
}

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.

https://www.w3schools.com/html/html_filepaths.asp

The JavaScript displays...

https://localhost:7262/images/guitar_PNG3362.png

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

Answer 3

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. )