Uncaught TypeError: Cannot set property 'src' of null Image Gallery

Question

请原谅我的 "newbness"，我不是职业编码员，只是在我也有编码的时候编码。

话虽如此，我正在尝试在我们的 web-based 网络监控工具 (SolarWinds NPM) 中创建一个图片库，以允许我们在我们的站点上查看我们设备的图片。我在 "Custom HTML Resource" 中执行此操作，它本质上是一个 iframe。

图库应使用 parent 页面的标题作为变量来确定在 Web 服务器上的哪个文件夹中查找图像。

当我尝试运行以下操作时，我在 Chrome 控制台中收到一条错误消息，显示 "Uncaught TypeError: Cannot set property 'src' of null" 对于 JavaScript.[=12 的第 2 行=]

HTML:

<html>
<head>
<style>
div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}
</style>
</head>
<body>
<div class="img">
  <a target="_blank" href="">
    <img id="Image1" src="image1.png"  width="300" height="200">
  </a>
</div>

<div class="img">
  <a target="_blank" href="">
    <img id="Image2" src="image2.png" width="300" height="200">
  </a>
</div>

<div class="img">
  <a target="_blank" href="">
    <img id="Image3" src="image3.png" id="Image3" width="300" height="200">
  </a>
</div>

<div class="img">
  <a target="_blank" href="">
    <img id="Image4" src="image4.png" width="300" height="200">
  </a>
</div>
<script src="SiteDBpics\Gallery.js"></script>
</body>
</html>

这里是 JavaScript:

var title = window.parent.document.getElementsByTagName("title")[0].innerHTML;
document.getElementById("Image1").src = "SiteDBpics/" + title + "/image1.png";
document.getElementById("Image2").src = "SiteDBpics/" + title + "/image2.png";
document.getElementById("Image3").src = "SiteDBpics/" + title + "/image3.png";
document.getElementById("Image4").src = "SiteDBpics/" + title + "/image4.png";

如有任何帮助，我们将不胜感激！

EDIT1：HTML 已更改以反映 "A. Wolff" 的建议。

EDIT2：我发现了问题！我有一些格式错误，我在声明图像 URL 时忘记了 HTML 部分中的一些引号。我还必须更改脚本中的文件路径详细信息。

Answer 1

您在第 47 行的 target=_blank href=" 上缺少第二个结束双引号。这会导致您的 DOM 创作失败。

此外，您的文件中没有 "document.getElementsByTagName('title')[0]" 正在寻找的标题标签。

Uncaught TypeError: Cannot set property 'src' of null Image Gallery

Uncaught TypeError: Cannot set property 'src' of null Image Gallery

html

javascript

jquery