CSS Hide All Images with Matching Src Attribute

CSS hide all images with matching SRC attribute

Use this CSS3 attribute selector:

img[src*="hideme"] {
    display: none;
}

I'd prefer to use a hideme class instead, but if you must hide an image based on its src attribute, the above is fine.

How to find img with a certain src url and change css using vanilla javascript?

You dont need js or jquery for this - use the CSS attribute selector and hide the image based on the src attribute matching the target text. Note the syntax of the selector to match the src attribute value which is any text preceded by "https://www.google"

img[src ^= "https://www.google"]{  display: none;}

<img src="https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwi39tv6xerjAhUPfysKHYwUBfIQjRx6BAgBEAU&url=https%3A%2F%2Fweheartit.com%2Fentry%2F230207975&psig=AOvVaw2PDSxeoivmwsXMXWxVICIQ&ust=1565053762473751" alt="google-image"  title="google-image" /><img src="https://via.placeholder.com/100x150" alt="not google-image"   title="not google-image" />

Hide excess part of image that is outside of the image in front

You could use the CSS mask property.

https://developer.mozilla.org/en-US/docs/Web/CSS/mask

hide img tag if src is empty but without javascript/jQuery or css3

You can use [attr=val] selector

img[src=""] {
   display: none;
}

The above selector will simply match, if the src attribute has no value. This selector is a general one and will match all the img tag in the document with an empty src, if you want to target specific ones, than use more specific selector like

.class_name img[src=""] {
    display: none;
}

Demo

Demo (Without the above selector, see that red line?)

Alternatively, if you want to reserve the space taken by img tag, you might like to use visibility: hidden; instead of display: none; as display: none; will simply mess your layout where visibility: hidden; will reserve the space, it will just hide the img

See the difference between display: none; and visibility: hidden;

Demo (visibility: hidden;, reserves space)

Demo 2 (display: none;, won't reserve space)

Note: None of the above selectors will REMOVE the img tag from the
DOM, it will simply hide it from the front end

Hidden img src value

No its not possible to hide it through js/jquery or any scripting language. Though there are tweaks etc like you can disable right click or showing fake image src or setting image using CSS background-image property (this way, the user won't be able to right click and save the image as) to deceive a common user;

<body oncontextmenu="return false">
</body>

What i understand, your wish is to restrict users from stealing your images by hiding the image source. Remember, if a user can see the image on their browser, then it means the user has downloaded the image and it is already on their computer. Simple is that. There is no way to prevent images from being stolen.

Even if you managed to somehow invent a way for an image to be shown on the customers computer without them downloading it, then they can still take a screen shot, and again your plans have been failed.

Some helping links for you (questions like yours)

1) Protect image download
2) Restricting images from direct url download

Hide image in the link when press link once

To hide the image, you can set its src property to nothing:

this.children[0].src = "";

However, since your goal is to prevent the user from clicking the button more than once, it is better to make the entire link disappear:

this.style.visibility = 'hidden';

Here is a demo (I commented out the redirection for demo purpose):

$(document).ready(function() {  $(".open_close_doors").click(function() {    $("#leftdoor_inner").animate({      "left": "-=395px"    }, "slow");    $("#rightdoor_inner").animate({      "left": "+=395px"    }, "slow");    this.style.visibility = 'hidden';    //setTimeout("window.location.href='wall.php';", 200);  });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><a class="open_close_doors" href="#"><img src='http://placehold.it/50x50' onmouseover="this.src='http://placehold.it/100x100'" onmouseout="this.src='http://placehold.it/50x50'"></a>

CSS Hide All Images with Matching Src Attribute