我试图显示从本地机器选择的图像，我需要该图像的位置用于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
在Edge浏览器的控制台中发现大量源映射错误后，我偶然发现了这个Stack Overflow问题。(我想我很久以前就禁用了Chrome浏览器中的警告。)
对我来说，这意味着首先意识到源地图是什么;请参考Macro Mazzon的回答来理解这一点。既然这是个好主意，那么问题就在于如何打开它们。
这就像在webpack.config.js文件中添加这一行一样简单
module.exports = {
devtool: "source-map",
}
现在Edge可以检测到源映射，错误就消失了。
如果这个回答侮辱了任何人的智力，我很抱歉，但也许读到这篇文章的人会像我一样对源地图一无所知。
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.
正确:这与你的代码无关。对于这个警告，我找到了两个有效的解决方案(不仅仅是禁用它)。为了更好地理解源映射是什么，我建议你看看这个答案，它解释了它是如何帮助你调试的:
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.
