Replacing image src with javascript

Question

I have this HTML class where I want to replace the img src with different image. Have been able to find something close but nothing quite working.

HTML:

<div class="playoff-img">
  <a href=""><img src="src/img/imga.png"></a>
</div>

Javascript:

$('div.playoff-img:contains("src/img/imga.png")').replaceWith('src/new/image/imgb.png');

The question is duplicate of [Changing the image source using jQuery](https://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery) — Alexander, Jul 07 '18 at 16:05

score 2 · Accepted Answer · answered Jul 07 '18 at 16:03

2

You need an attribute selector and use .attr to set the src attribute.

$('div.playoff-img img[src="src/img/imga.png"]').attr('src', 'src/new/image/imgb.png');

answered Jul 07 '18 at 16:03

Daniel A. White

181,601
45
354
430

score 1 · Answer 2 · edited Jul 07 '18 at 17:37

1

The Js way of solving this problem

document.getElementsByTagName("img")[0].setAttribute("src","http://www.gstatic.com/webp/gallery/4.jpg");

The jQuery way of solving this problem

$(".playoff-img img").attr("src", "http://www.gstatic.com/webp/gallery/4.jpg");

edited Jul 07 '18 at 17:37

Rando Hinn

1,212
21
39

answered Jul 07 '18 at 17:16

Dev

11
1

score 0 · Answer 3 · answered Jul 07 '18 at 16:03

0

simple and easy !

$(".playoff-img img").attr("src", "put new source address here");

answered Jul 07 '18 at 16:03

MajiD

2,191
1
22
30

Get Off My Lawn · Answer 4 · 2018-07-07T16:16:07.590

0

Use [attr*="value"] to select an attribute that contains a particular string. Next you will want to use attr() to set the attribute to something new.

$('div.playoff-img img[src*="src/img/imga.png"]')
    .attr('src', 'src/new/image/imgb.png');

edited Jul 07 '18 at 16:16

answered Jul 07 '18 at 16:06

Get Off My Lawn

30,739
34
150
294

score 0 · Answer 5 · answered Jul 07 '18 at 17:25

<!-- use jquery -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="playoff-img">
  <a href=""><img src="src/img/imga.png"></a>
</div>

<script>
$(function(){
    $(".playoff-img").attr("src", "put new source address here");
});
</script>

Replacing image src with javascript

5 Answers5