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


当前回答

在我的情况下,我犯了一个愚蠢的错误,添加bootstrap.min.js而不是bootstrap. bundle .js:)

其他回答

对我来说,这些警告是由Selenium IDE Chrome扩展引起的。这些警告出现在控制台中每次页面加载:

DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/atoms.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/polyfills.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/escape.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/playback.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/record.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

由于Selenium IDE已经设置为能够读取所有站点上的站点数据,所以我卸载了它。(我在这里读到另一个评论,你可以尝试为一个扩展启用更多权限,而不是删除它。)在我的情况下,删除硒IDE (Chrome扩展)摆脱了警告。

你需要在开发者模式下打开Chrome:选择更多工具,然后选择扩展,然后选择开发者模式

这是因为Chrome增加了对源地图的支持。

转到开发人员工具(浏览器中的F12),然后选择右上角的三个圆点,然后转到设置。

然后,查找Sources,并禁用这些选项:

“启用JavaScript源映射” “启用CSS源映射”

如果你这么做,警告就会消失。这与你的代码无关。检查其他页面中的开发人员工具,您将看到相同的警告。

正确:这与你的代码无关。对于这个警告,我找到了两个有效的解决方案(不仅仅是禁用它)。为了更好地理解源映射是什么,我建议你看看这个答案,它解释了它是如何帮助你调试的:

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.

我也有同样的问题。我试图一个接一个地禁用扩展来检查它,最后意识到我启用了Adblock,这导致了这个问题。为了消除这个错误,我执行下面的步骤,

三个点(右上角)。 单击更多工具—>扩展。 禁用广告拦截。 重新加载页面。

现在应该可以了。