How do i add attributes to my images with javascript?

Question

i would like to know how i could add image attributes to the following code. I've added a teest function to see if the users browser supports webp image and if it doesn't it just shows a jpg image instead of webp but i want to add attributes and nothing i've done works.

function hasWebP() {
  var rv = $.Deferred();
  var img = new Image();
  img.onload = function() { rv.resolve(); };
  img.onerror = function() { rv.reject(); };
  img.src = '/images/home/dot.webp';
  return rv.promise();
}
hasWebP().then(function() {
    var img=document.createElement("img");
    img.src="images/home/IMG_4389.webp";
    img.id="picture";
    var foo = document.getElementById("myFace");
    foo.appendChild(img);
}, function() {
    var img=document.createElement("img");
    img.src="images/home/IMG_4389.png";
    img.id="picture2";
    var foo = document.getElementById("myFace");
    foo.appendChild(img);
});

Have you tested the img src urls? I tested with img.src="/images/home/IMG_4389.png" (note the / at the start of the src) and it appended the image to the DOM for me — Katherine R
– Katherine R, Commented Apr 21, 2018 at 0:35

Saxo_Broko · Accepted Answer · 2018-08-17 11:10:58Z

1

I changed my code to

function hasWebP() {
  var rv = $.Deferred();
  var img = new Image();
  img.onload = function() { rv.resolve(); };
  img.onerror = function() { rv.reject(); };
  img.src = '/images/home/dot.webp';
  return rv.promise();
}
hasWebP().then(function() {
    document.getElementById("picture").src="/images/home/IMG_4389.webp";
}, function() {
    document.getElementById("picture").src="/images/home/IMG_4389.png";
});

And added this to my html

<img src="" id="picture" draggable="false">

edited Aug 17, 2018 at 11:10

answered Apr 21, 2018 at 1:40

Saxo_Broko

3982 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

How do i add attributes to my images with javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related