How to send parsed URL values from javascript to src of img tag in html?

Question

I am creating a html file called test.html. Using JavaScript, I have parsed a URL to obtain the parsed parameters.

The URL looks something like this (Example URL)

http://path.to.a.webserver/test.html?p1=welcome&p2=home

After parsing the values, I want to send the parsed values to an HTML img tag in the following format. When I hit the above URL, the values p1 and p2 gets parsed and img tag in the test.html file gets executed.:

<img src="http://example2.com/tiger.gif?p1={p1_parsed_value}&p2={p2_parsed_value}"

I have tried using document.getElementById. I'm not sure if it is right. How can I pass only those parsed URL values into the src of the img tag?

take a look to [How can I get query string values in JavaScript?](https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript) — gaetanoM, Jul 22 '17 at 17:34

score 2 · Accepted Answer · answered Jul 22 '17 at 17:35

2

var img = document.querySelector("img");//select node

img.setAttribute("src",url);//set src attribute to required url

answered Jul 22 '17 at 17:35

Bakhtiiar Muzakparov

2,308
2
15
24

I want to pass it directly to the src tag. Is there another method? – CoderPJ Jul 22 '17 at 17:58
src is an **attribute** on img tag, – Bakhtiiar Muzakparov Jul 22 '17 at 18:00
you may also take interest in jquery library, it makes dom traversal and manipulation easier – Bakhtiiar Muzakparov Jul 22 '17 at 18:01

score 1 · Answer 2 · answered Jul 22 '17 at 18:02

you can use URL

var baseUrl = 'http://example2.com/tiger.gif';
var u = new URL('http://example.com/test.html?p1=welcome&p2=hello');

// u.search: ?p1=welcome&p2=hello
var newUrl = baseUrl  + u.search;
console.log(newUrl);

// or 
newUrl = baseUrl + '?p1=' + u.searchParams.get("p1") + '&p2=' + u.searchParams.get("p2")
console.log(newUrl);

//to display the image

document.body.innerHTML += '<img src="' + newUrl +'">';

score 1 · Answer 3 · edited Jul 22 '17 at 21:40

1

$('#test img').attr('src', function(index,`val`) {
    return val.replace("default.jpg", "dynamic.jpg");
});

edited Jul 22 '17 at 21:40

xlm

6,854
14
53
55

answered Jul 22 '17 at 18:03

Saurabh Tiwari

11
1

How to send parsed URL values from javascript to src of img tag in html?

3 Answers3