Replace src of Image tag using css property

You can't change the html attributes values with CSS, only javascript.

But, with CSS you can "hide" the image and put a background in its place.

div img {
  height: 0;
  width: 0;
  padding-top: 175px;
  padding-left: 280px;
  background-image: url("http://www.planwallpaper.com/static/cache/6f/82/6f8200c95d588fde83d1f212f674611a.jpg");
}
<img src="http://www.planwallpaper.com/static/cache/a1/4e/a14e880ef245c3d159ba96ebbeb4c8c3.jpg">

<div>Changed img:</div>
<div><img src="http://www.planwallpaper.com/static/cache/a1/4e/a14e880ef245c3d159ba96ebbeb4c8c3.jpg"></div>

You can use content:url("image.jpg")

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

In your CSS,

.img {
    content:url("/new/image/source.png");
}

If you cannot modify HTML,

img {
    content:url("/new/image/source.png");
}

In HTML,

<img class="img"/>

I have not try this yet, but I not sure if the inline attribute src will overweight the CSS content.

Update

It should work if you already have src for your img element. Thanks @pol

Tags:

Html

Css