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');
    }
};

Answer 1

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?

Answer 2

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');
    }
};

Answer 3

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.

Answer 4

我认为这只是logo.src = "img/rm2.png" 。

Answer 5

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

Answer 6

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
}