Create a New Image() in 1 Line

Question

Right now, I'm using

var lifeIcon = new Image();

lifeIcon.src = "img/System/lifeIcon.png";

Is there a way to do the same thing in 1 line?

I tried

var lifeIcon = (new Image()).src = "img/System/lifeIcon.png";

But it doesn't work. lifeIcon is considered as a string...

Thanks.

Note: I have many, many images. My goal is to use the Image in a canvas.
Ex:

ctx.drawImage(lifeIcon,0,0)

Solution:

function newImage(src){

    var tmp = new Image();

    tmp.src = src;

    return tmp

}



var lifeIcon = newImage("img/System/lifeIcon.png");

var closeIcon = newImage("img/System/closeIcon.png");

var goldIcon = newImage("img/System/goldIcon.png");

...

Note: I personally find it faster to write and faster to read that way, especially because I have many images.

Answer 1

It sort of depends on what you're doing next. If the only other thing you need is to append it, then you can do this:

element.appendChild(new Image()).src = "img/System/lifeIcon.png";

This works because .appendChild() returns the newly appended element.

If you need to assign other properties, then you may simply want to create a helper function that lets you pass an object holding the properties and values.

function create(name, props) {
    var elem = document.createElement(name);
    for (var p in props)
        elem[p] = props[p];
    return elem;
}

This is a very simple function, and could be expanded a bit, but you get the idea.

var el = create("img", {src: "img/System/lifeIcon.png"});

Create a New Image() in 1 Line

Sign up