我试图显示从本地机器选择的图像，我需要该图像的位置用于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
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.
