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

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

其他回答

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

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

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

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

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

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

检查它是否工作!

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

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

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

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

右键单击扩展图标。

Or

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

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

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