使用 jQuery 清除 IMG答案

【问题标题】：Clear an IMG with jQuery使用 jQuery 清除 IMG
【发布时间】：2017-08-23 22:45:01
【问题描述】：

我正在尝试从 <img> 元素中删除加载的图像，但清除或删除 src 并没有这样做。怎么办？

HTML：

<img src='https://www.google.com/images/srpr/logo3w.png'>

JQUERY：

$('img').attr('src', ''); // Clear the src
$('img').removeAttr('src'); // Remove the src

图像残留...

小提琴：http://jsfiddle.net/6x9NZ/

【问题讨论】：

清除 img 是什么意思？你想从 DOM 中移除 img 元素吗？
no- 从 img 元素中清除加载的图像
嗯，它不会留在每个兄弟身上。并且你能举例说明你需要什么行为来清除 src 属性而不从 DOM 中删除 img 元素？
我猜他试图保留img 节点而不是图像数据。当图像不在视野范围内时，这可能有助于释放内存。

标签： jquery html image

【解决方案1】：

您必须要么完全使用 remove <img> 元素，要么将其替换为不同的图像（可能是透明的 gif）。

【讨论】：

或者您可以将 src 更改为 1x1 像素：$('img').attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==');
@davidsleeps — 这只是我在这个答案中所说的一个例子。
@Quentin 道歉，我现在可以看到了……但是因为它不涉及另一个图像的存在，所以感觉有点不同。

【解决方案2】：

这对我有用：

var $image = $('.my-image-selector');
$image.removeAttr('src').replaceWith($image.clone());

但是，请注意您可能附加到图像的任何事件处理程序。 jQuery clone 总是有 withDataAndEvents 和 deepWithDataAndEvents 选项，但我没有用它们测试过代码：http://api.jquery.com/clone/#clone-withDataAndEvents

另外，如果您想对多张图片执行此操作，您可能必须使用 jQuery each 之类的东西。

我在类似问题上发布了相同的答案：Setting image src attribute not working in Chrome

【讨论】：

【解决方案3】：

你可以这样做。首先给图片分配一个ID

<img id='image_id' src='https://www.google.com/images/srpr/logo3w.png'>

然后去掉源属性。

jQuery('#image_id').removeAttr('src')
jQuery('#image_id').show();

【讨论】：

【解决方案4】：

如何简单地隐藏一个元素：

$('img').hide();

您不能从标签中删除图像。当您使用 jQuery 时，请记住您不处理标签，而是使用 DOM 元素进行操作。因此，就 jquery 而言，您的标签不是标签，它是一个对象，一个 DOM 元素。这是元素不是标签，它是在 DOM 中表示图像的元素。所以如果你想隐藏一个图像，你必须隐藏元素。

【讨论】：

你甚至可以隐藏一个元素，很重要！！只需拥有和 id 到您的 img 标签，然后执行$('#myImageID').hide()。
如果您想再次显示它，请在元素上使用show()

【解决方案5】：

使用删除节点

$("img").remove()

或简单地使用隐藏图像

$("img").hide()

【讨论】：

【解决方案6】：

最好的方法是用另一个替换图像。我的意思是不要清理 src，而是设置一个假值，如 .attr('src','notting'); 它不会加载任何图像，并且旧图像的缓存版本将消失

【讨论】：

页面加载后得到 404 重要吗？您可以将其替换为现有的空图像。

【解决方案7】：

这对我有用。将 div 'custom_preview_image' 中的图像属性 src 替换为空白

field = jQuery(this).closest('td').find('.custom_repeatable li:last').clone(true); field.find('.custom_preview_image').removeAttr('src').end();

【讨论】：

【解决方案8】：

如果您仍然希望元素占用空间，但不可见，请使用 css 将其隐藏。给你的图片一个 class 或 id 并像这样隐藏它：

<img id='hide' src='https://www.google.com/images/srpr/logo3w.png'>

$('#hide').css('visibility', 'hidden');

【讨论】：

【解决方案9】：

在将"src" 设置为"#" 时不会显示损坏的图像，有一种解决方法，因此您可以将alt 属性设置为所需的文本：

 $('#thumbnialPreviewImage').attr('src', '#');
 $('#thumbnialPreviewImage').attr('alt', 'Please Select Image');

【讨论】：