Facing error like : DevTools failed to load Source

I have recently started learning javascript. I am trying to display an image selected from the local machine. I want to return the location of that image into a javascript function. I am facing this error and unable to get the location of the image. For getting image location I tried using console.log(); method but nothing is returned.

console.log(document.getElementById("uploadPreview"));

HTML CODE!!

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
 
	<div align="center" style="padding-top: 50px">
	<img align="center" 
	id="uploadPreview" style="width: 100px; height: 100px;" />
	</div>

	<div align="center" style="padding-left: 30px">
	<input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" />
	</div>

	<script type="text/javascript">



	    function PreviewImage() {
	        var oFReader = new FileReader();
	        oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

	        oFReader.onload = function (oFREvent) {
	            document.getElementById("uploadPreview").src = oFREvent.target.result;
	            console.log(document.getElementById("uploadPreview").src);
	        
	        };
	    };

	</script>

</body>
</html>

Console Output: While I am running this file, I am getting these warnings as specified below. Can I get some help?

DevTools failed to load SourceMap: Could not load content for chrome-extension://alplpnakfeabeiebipdmaenpmbgknjce/include.preload.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

That's because Chrome added support for source maps.

Go to the developer tools (F12 in the browser), then select the three dots in the upper right corner, and go to Settings.

Then, look for Sources, and disable the options: "Enable javascript source maps" "Enable CSS source maps"

If you do that, that would get rid of the warnings. It has nothing to do with your code. Check the developer tools in other pages and you will see the same warning.