Creating an image element with src containing certain query string parameters

Question

I would like to create an HTML image element like this one:

<img src="www.example.com?param1=aid&param2=sid&param3=user&param4=now" />

I tried doing this:

var now = new Date().getTime();
var aid = 123456;
var sid = 78910;
var user = "abcd";

How can I create the element from this data?

T.J. Crowder · Accepted Answer · 2023-11-30 15:19:13Z

6

You create an img element using document.createElement("img"). (A tag is an HTML text concept; when working with the DOM, you're working with elements and nodes and such.)

You set its src, a string, using the src reflected property of that element. To create that string you'd use string concatenation (+) or a template literal (see below).

So (string concatenation):

const img = document.createElement("img");
img.src = "http://www.example.com?param1=" + aid +
              "&param2=" + sid +
              "&param3 = " + encodeURIComponent(user) +
              "&param4=" + now;

Or (template literal):

const img = document.createElement("img");
img.src = `http://www.example.com?param1=${aid}&param2=${sid}&param3=${encodeURIComponent(user)}&param4=${now}`;

Then you'd want to append that to the DOM somewhere (appendChild, append, insertBefore, etc.).

Note the encodeURIComponent on the non-numeric one, user. Both the names and values in a query string must be URI-encoded. But I haven't bothered on param1, param2, etc. because they only have characters that don't need URI-encoding (same for numbers in normal form). But when in any doubt, encode, it won't do any harm even when unnecessary.

Re your comment:

And presumably if I'd like to add attributes to the img element it'd be like img.height=1 and img.width=1?

The specification lists the properties of img elements (see the "DOM Interface"). Yes, both height and width are there and setting them has the same effect as using the height and width attributes, although you might want to use a stylesheet instead.

Not all attributes have reflected properties. For those that don't, you'd use setAttribute("name", value) (the value will be converted to a string if it isn't already one).

edited Nov 30, 2023 at 15:19

answered Jun 21, 2015 at 16:32

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

Doug Fir Over a year ago

Good to know about the template string too. And that's just going to be JS no libraries or anything? Fantastic.

T.J. Crowder Over a year ago

@DougFirr: Yup, once everyone upgrades their browsers, so ~2021 or so. :-) Meanwhile, transpilers like Babel already support it. Example

reg4in · Accepted Answer · 2015-06-21 16:33:33Z

0

Strings in JS can be chained together with the + operator. Number values will be coerced to strings (although that sometimes won't work as expected).

answered Jun 21, 2015 at 16:33

reg4in

5743 silver badges9 bronze badges

Collectives™ on Stack Overflow

Creating an image element with src containing certain query string parameters

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related