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