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


当前回答

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

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

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

其他回答

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

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.

进入开发人员工具→设置→控制台→勾选“仅选择上下文”。警告将被隐藏。你可以通过取消同一个方框的勾选来再次看到它们。

“仅选择上下文”仅指顶部、iframe、工作上下文和扩展上下文。在绝大多数情况下,这就是你所需要的。

在Chrome上没有足够权限的扩展可能会导致这些警告,例如React开发工具。看看下面的步骤是否能解决你的问题:

右键单击扩展图标。

Or

做延伸。 单击React开发人员工具行中的三个点。

然后选择“这可以读写站点数据”。

您应该在列表中看到三个选项。根据您对扩展的信任程度,选择一个足够严格的扩展,同时满足扩展的需求。

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

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

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

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

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

我很欣赏这是你的扩展的一部分,但我看到这条消息在各种各样的地方这些天,我讨厌它:我如何修复它(这个修复似乎大大加快了浏览器)是通过添加一个死文件

物理上创建它想要的文件/在它想要的位置,作为一个空白文件(例如,"popper.min.js.map") 把这个放进空白文件里 { “版本”:1、 “映射”:“”, “来源”:[], “名称”:[], “文件”:“popper.min.js” } 确保空白文件内容中的“file”:“*******”与您的文件名******相匹配。Map(去掉。Map这个词)

(我怀疑你可以自己把这个死文件方法添加到插件中。)