我试图显示从本地机器选择的图像，我需要该图像的位置用于JavaScript函数。但我查不到地址。
为了获得图像位置，我尝试使用console.log，但没有返回任何结果。
console.log(document.getElementById("uploadPreview"));
下面是HTML代码:
<!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>
控制台输出:
以下是警告:
DevTools无法加载SourceMap:无法加载内容
chrome扩展:/ / alplpnakfeabeiebipdmaenpmbgknjce / include.preload.js.map:
HTTP错误:状态代码404,net::ERR_UNKNOWN_URL_SCHEME
修复由Chrome扩展引起的开发工具控制台中“SourceMap”错误消息
由McAfee扩展引起的例子:
DevTools failed to load SourceMap: Could not load content for chrome-extension:// klekeajafkkpokaufllcadenjdckhinm / SourceMap /content。map: HTTP错误:状态代码404,net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/ SourceMap /chrome/content。map: HTTP错误:状态代码404,net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/ SourceMap /chrome/iframe_handler。map: HTTP错误:状态代码404,net::ERR_UNKNOWN_URL_SCHEME
如果你正在开发，那么你需要勾选“启用JavaScript源映射”和“启用CSS源映射”，才能在Chrome开发者工具中看到你的源代码。取消选中这些选项会使您无法调试源代码。这就像关掉火警，而不是把火扑灭。你不会想这么做的。
相反，您希望找到引起消息的扩展并将其关闭。你可以这样做:
转到Chrome右上角的三个点。
转到“更多工具”，点击“扩展”。
每次对一个扩展执行此操作，直到控制台中不再出现“SourceMap”错误:
向左滑动开关，关闭分机。
重新加载正在使用开发工具的页面。
检查是否有任何“SourceMap”错误消息消失。
如果有的话，就是这个扩展引起了这些消息。
否则，该扩展可以重新打开。
在确定哪些扩展导致了问题之后:
如果你需要它，然后联系制造商让他们解决这个问题。
否则，删除扩展名。
正确:这与你的代码无关。对于这个警告，我找到了两个有效的解决方案(不仅仅是禁用它)。为了更好地理解源映射是什么，我建议你看看这个答案，它解释了它是如何帮助你调试的:
The .map files are for JavaScript and CSS (and now TypeScript too) files that have been minified. They are called SourceMaps. When you minify a file, like the angular.js file, it takes thousands of lines of pretty code and turns it into only a few lines of ugly code. Hopefully, when you are shipping your code to production, you are using the minified code instead of the full, unminified version. When your app is in production, and has an error, the sourcemap will help take your ugly file, and will allow you to see the original version of the code. If you didn't have the sourcemap, then any error would seem cryptic at best.
First solution: apparently, Mr Heelis was the closest one: you should add the .map file and there are some tools that help you with this problem (Grunt, Gulp and Google closure for example, quoting the answer). Otherwise you can download the .map file from official sites like Bootstrap, jQuery, font-awesome, preload and so on... (maybe installing things like popper or swiper by the npm command in a random folder and copying just the .map file in your JavaScript/CSS destination folder)
Second solution (the one I used): add the source files using a CDN (content delivery network). (Here are all the advantages of using a CDN). Using content delivery network (CDN) you can simply add the CDN link, instead of the path to your folder. You can find CNDs on official websites (Bootstrap, jquery, popper, etc.) or you can easily search on some websites like Cloudflare, cdnjs, etc.
