我试图显示从本地机器选择的图像，我需要该图像的位置用于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
正确:这与你的代码无关。对于这个警告，我找到了两个有效的解决方案(不仅仅是禁用它)。为了更好地理解源映射是什么，我建议你看看这个答案，它解释了它是如何帮助你调试的:
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.
修复由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”错误消息消失。
如果有的话，就是这个扩展引起了这些消息。
否则，该扩展可以重新打开。
在确定哪些扩展导致了问题之后:
如果你需要它，然后联系制造商让他们解决这个问题。
否则，删除扩展名。
Web浏览器中的调试和源地图问题
希望这能澄清问题背后的技术问题…了解事物的运作方式会有所帮助:)
这个浏览器错误意味着它在sourcemap中间文件中有一些你的JavaScript的编译版本，或者是一些第三方创建的，现在需要在你的web浏览器的“devtools”中调试相同的脚本。
如果您的脚本失败(或者在您的情况下，试图获取隐藏在创建脚本的源地图代码中的图像源)，但其脚本错误与一些从原始源地图文件创建的JavaScript绑定，现在无法找到用于调试相同错误的JavaScript。这是一个关于错误的错误，一个缺失的调试文件创建了一个新的错误。(疯狂的吧?)
此错误可能来自web浏览器中的扩展，并报告它已经在devtools的console.log窗口中记录了一个脚本错误(在浏览器中按F12)。错误可能来自扩展程序(而不是您的代码)，说它有一些代码包含它不能访问的源地图文件的地址，有一个坏的URI/URL地址，被阻止，或丢失。
只有当使用devtools的开发人员需要再次调试原始脚本时，浏览器才需要这个源地图文件。
A sourcemap, by the way, is a file that translates or transpiles code from one language to another language. Often this is a file that the browser uses to translate this source code into a child script like JavaScript/ECMAScript, or when it needs to do the opposite and recreate the source file from the child script. In most cases this file is not needed at all as a 3rd party software program has already compiled or transpiled the source code into the child script for the browser. For example, developers who like TypeScript use it to create JavaScript. This source code gets transpiled into JavaScript so the browser script engine can run it. The URI/URL to this sourcemap file is usually at the top of the javaScript or application compiled code file in a format like //#....
When this intermediary transpile file is missing or blocked for security reasons in a web browser, the application will usually not care unless it needs the source file for debugging the child script using this source file. In that case it will complain when it feels it needs this file and cannot find it, as it uses it to recreate the source file for the code running in the browser when debugging the script in order to allow a developer to debug the original source code. When it cannot find it, it means that any developer trying to debug it will not be able to do so, and is stuck with the compiled code only. So it is safe to turn off these errors in the various ways mentioned in this post. It should not affect your own scripts if it is connected to an extension. Even if it is related to your own scripts, it is still unlikely you need it unless you plan to run debugging from devtools.
