使用 JavaScript 检查 img src 是否为空

作者

使用 JavaScript 检查 img src 是否为空

Check if an img src is empty using JavaScript

使用该getAttribute()方法检查图像 src 是否为空，例如
img.getAttribute('src'). 如果该src属性不存在，则该方法返回null或空字符串，具体取决于浏览器的实现。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <img id="img" alt="banner" />

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const img = document.getElementById('img');

const src = img.getAttribute('src');

if (!src) {
  console.log('img src is empty');
} else {
  console.log('img src is NOT empty');
}

我们使用
getAttribute
方法获取src图像元素的属性值。

如果未在元素上设置提供的属性，则该方法返回一个null
或""（空字符串）值。

如果元素的src属性不为空，则返回属性的值，这里是一个例子。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <img
      id="img"
      src="http://bobbyhadz.com/images/blog/javascript-replace-all-child-nodes/banner.webp"
      alt="banner"
    />

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const img = document.getElementById('img');

const src = img.getAttribute('src');
console.log(src); // 👉️ "http://bobbyhadz.com/images/blog/javascript-replace-all-child-nodes/banner.webp"

if (!src) {
  console.log('img src is empty');
} else {
  // 👇️ this runs
  console.log('img src is NOT empty');
}

如果在src图像元素上设置了该属性，则该else块将运行。

–

发表评论