JavaScript change img src attribute without jQuery

Question

How to change the src attribute of a HTMLImageElement in JavaScript?

I need help to convert logo.attr('src','img/rm2.png') to vanilla JavaScript.

window.onresize = window.onload = function () {
    if (window.innerWidth > 1536) {
        var logo = document.getElementById('rm');
        logo.attr('src','img/rm2.png');
    }
};

Community · Accepted Answer · 2017-05-23 12:00:28Z

34

You mean you want to use pure javascript?

This should do it:

var logo = document.getElementById('rm');
logo.src = "img/rm2.png";

So your function should look like :

window.onresize = window.onload = function () {
    if (window.innerWidth > 1536) {
      var logo = document.getElementById('rm');
      logo.src = "img/rm2.png";
    }
};

Note: You could also use element.setAttribute. BUT, see this post for more:
When to use setAttribute vs .attribute= in JavaScript?

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Mar 16, 2012 at 4:08

gideon

19.5k11 gold badges74 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dbrin Over a year ago

dang it, beat me by 8 seconds :)

gideon Over a year ago

:) Yea the JS/JQuery questions really have too many people fighting to shoot an answer.

Tejasva Dhyani · Accepted Answer · 2012-03-16 04:09:36Z

1

try this...hope it works

window.onresize = window.onload = function () {
    if (window.innerWidth > 1536) {
        var logo = document.getElementById('rm');
        logo.setAttribute('src','img/rm2.png');
    }
};

answered Mar 16, 2012 at 4:09

Tejasva Dhyani

1,3621 gold badge10 silver badges19 bronze badges

Comments

Aaron · Accepted Answer · 2012-03-16 04:09:17Z

0

var logo = document.getElementById('rm');
logo.setAttribute('src', 'img/rm2.png');

answered Mar 16, 2012 at 4:09

Aaron

5,2471 gold badge21 silver badges21 bronze badges

Comments

Nobita · Accepted Answer · 2012-03-16 04:10:30Z

0

Since you say you want to do this in different places of the program, I would create a function like this:

function ChangeImage(image_id,path)
{
  document.images[image_id].src = path
}

answered Mar 16, 2012 at 4:10

Nobita

23.8k11 gold badges63 silver badges87 bronze badges

Comments

Sabba Keynejad · Accepted Answer · 2015-12-22 10:10:36Z

0

So if you want to check if the size has changes and then changes back check code bellow.

window.onresize = window.onload = function () {
    if (window.innerWidth < 768) {

      var logo = document.getElementById('changeLeft');
      logo.src = "MobileImage.png";

    }else{

 var logo = document.getElementById('changeLeft');
      logo.src = "DesktopImage.png";

    }
};

Adjust window.innerWidth to decide on your break points. Hope that helps.

answered Dec 22, 2015 at 10:10

Sabba Keynejad

8,6412 gold badges29 silver badges22 bronze badges

Comments

Francisco Romero · Accepted Answer · 2016-05-18 22:58:32Z

0

I think it's just logo.src = "img/rm2.png".

edited May 18, 2016 at 22:58

Francisco Romero

13.3k23 gold badges100 silver badges173 bronze badges

answered Mar 16, 2012 at 4:08

dbrin

15.7k4 gold badges59 silver badges85 bronze badges

Collectives™ on Stack Overflow

JavaScript change img src attribute without jQuery

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related