hihi hihi - 25 days ago 20
HTML Question

How to add variable into <img> tag?

I would like to ask how to pass the E-mail id into image tag ?

<li class="form-line" data-type="control_email" id="id_3">
<label class="form-label form-label-left form-label-auto" id="label_3" for="input_3"> E-mail: </label>
<div id="cid_3" class="form-input jf-required">
<input type="email" class=" form-textbox validate[Email]" id="input_3" name="q3_email" size="30" value="" />
</div>
</li>
<img src="https://api.qrserver.com/v1/create-qr-code/? data=HelloWorld&amp;size=100x100" alt="" title="" />

Answer

Technically you can add any of your own custom attributes to an HTML tag, and then access that information via javascript. For example:

var x = document.getElementsByTagName("img")[0].getAttribute("imgSize"); 
alert(x);
<img data="helloWorld" imgSize="100x100" src="https://api.qrserver.com/v1/create-qr-code/?    data=HelloWorld&amp;size=100x100"/>

If you mean dynamically add values on to the image source than you would do that with something like this in javascript:

var imgUrl = "https://api.qrserver.com/v1/create-qr-code/";
//add data
imgUrl += "?data=HelloWorld";
//add size
imgUrl += "&amp;size=100x100";
// set image
document.getElementById("myImg").src=imgUrl;
<img id="myImg" src="#" >

Comments