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


当前回答

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

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

现在应该可以了。

其他回答

Chrome在2022年改变了用户界面,所以这是被点赞最多的新版本回复。

打开开发工具(按F12或选项+命令+ J) 选择顶部的齿轮。那个区域有两个齿轮,所以一定要选择最上面的那个。 定位来源部分 取消选择“启用JavaScript源映射”

检查它是否工作!

对我来说,这个问题不是由开发中的应用程序本身引起的,而是由Chrome扩展React Developer Tool引起的。我通过右键单击工具栏中的扩展图标,单击“管理扩展”,然后启用“允许访问文件url”来部分解决这个问题。但这项措施只修复了部分警报。

我在React存储库中发现了问题,这表明原因是他们的扩展中的一个错误,并计划很快得到纠正-请参阅问题20091和20075。

您可以通过在匿名选项卡中访问应用程序而不启用任何扩展来确认与扩展相关。

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

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

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

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

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

修复由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”错误消息消失。 如果有的话,就是这个扩展引起了这些消息。 否则,该扩展可以重新打开。

在确定哪些扩展导致了问题之后:

如果你需要它,然后联系制造商让他们解决这个问题。 否则,删除扩展名。

你只是丢失了文件。

访问https://www.cdnpkg.com/网站。 下载你需要的文件并复制到正确的文件夹。