JavaScript 从 img 中删除 src

在 Web 开发中，我们常常需要通过 JS 来操作图片元素。其中一个常见的需求是删除图片的 src 属性，以达到隐藏或占位的目的。本文将介绍如何使用 JavaScript 从 img 中删除 src。

方法一：通过设置 src 为空字符串

document.querySelector('img').src = '';

这种方法非常简单明了，直接将 img 的 src 属性设置为空字符串即可。但需要注意的是，这种方法并不是完全删除了 img 的 src，而是将其替换为了一个空字符串，在某些场景下可能并不适用。

方法二：通过 removeAttribute 方法

document.querySelector('img').removeAttribute('src');

这种方法使用了 DOM API 中的 removeAttribute 方法来删除 img 的 src 属性。这种方法是完全删除 img 的 src，符合我们的需求。但需要注意，如果 img 中存在其他属性，使用 removeAttribute 方法会同时删除这些属性，开发者需要注意这点。

方法三：通过改变 outerHTML 属性

var img = document.querySelector('img');
img.outerHTML = img.outerHTML.replace(/src="(.*?)"/, '');

这种方法使用了 String 中的 replace 方法，通过正则表达式将 img 的 src 属性替换为空字符串。这种方法相对于第二种方法更为灵活，可以通过正则表达式来处理不同情况下的 src。但需要注意的是，这种方法会重新构建 img 元素的 HTML，如果 img 中存在其他属性或内容，则可能会被覆盖。

总结

以上三种方法都可以用来删除 img 的 src 属性，根据实际需要选择合适的方法即可。需要注意的是，这些方法都只能删除 src 属性，如果需要删除所有属性，可以使用 remove 方法：

document.querySelector('img').remove();