无法在 JavaScript 中设置 Null 的属性“src”

作者

无法在 JavaScript 中设置 Null 的属性“src”

Cannot set property ‘src’ of Null in JavaScript

出现“无法设置 null 的属性‘src’”错误的原因有两个：

  1. 将src属性设置为空值（不存在的图像元素）。
  2. 在声明 DOM 元素的 HTML 上方插入 JS 脚本标记。

无法设置 null 的属性 src

下面是错误如何发生的示例。

索引.js
const image = null;

// ⛔️ Uncaught TypeError: Cannot set properties of null (setting 'src')
image.src = 'photo.jpg';

要解决“无法将属性‘src’设置为 null”错误，请确保要为其设置src属性的图像元素存在。getElementById()如果您使用该方法并将其传递id
给 DOM 中不存在的方法，则最常发生该错误。

索引.js
const image = document.getElementById('does-not-exist');
console.log(image); // 👉️ null

// ⛔️ Cannot set properties of null (setting 'src')
image.src = 'photo.jpg';
idDOM 中不存在提供的图像，因此该方法返回了一个值。当我们尝试在一个值上设置属性时，会发生错误。 getElementByIdnullsrcnull

出现错误的另一个常见原因是将 JS 脚本标记放在声明 DOM 元素的代码之上。

要解决“Cannot set property ‘src’ of null”错误，请确保在声明 HTML 元素后将 JS 脚本标记放置在正文的底部。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- ⛔️ BAD - script is run before img is created ⛔ -->
    <script src="index.js"></script>

    <img id="photo" width="200" height="200" src="cat.jpg" />
  </body>
</html>

请注意，JS 脚本标记位于创建img
元素的代码上方。

该index.js文件在img创建元素之前运行，因此我们无法img从index.js文件内部访问。

索引.js
const image = document.getElementById('photo');
console.log(image); // 👉️ null

// ⛔️ Cannot set properties of null (setting 'src')
image.src = 'photo.jpg';

JS script 标签应该移动到 body 标签的底部，在它需要访问的所有 DOM 元素之后。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <img id="photo" width="200" height="200" src="cat.jpg" />

    <!-- ✅ GOOD - img already exists ✅ -->
    <script src="index.js"></script>
  </body>
</html>

现在img可以从index.js文件访问该元素。

索引.js
const image = document.getElementById('photo');
console.log(image); // 👉️ img#photo

// ✅ Works
image.src = 'photo.jpg';

结论

在以下情况下会出现“无法设置属性‘src’为空”的错误：

  • 尝试将src属性设置为一个null值（DOM 中不存在的图像元素）
  • 在声明 DOM 元素之前插入 JS 脚本标签

–

发表评论