How to display dynamic url image in html from which created by javascript - Stack Overflow

admin管理员组

文章数量:1356342

I am trying to display the image directly in HTML through a dynamic link I generated by Javascript.

function dynamicUrl() {
var url = "" + dynamic_variables + ".jpg";
return url;}

Most of my research, people display image by click on buttons or what I can do for now is link to the image.

<a href="javascript:window.location=dynamicUrl();">test</a>

Anyone know how to directly display the image using the dynamic URL? Thanks!

I am trying to display the image directly in HTML through a dynamic link I generated by Javascript.

function dynamicUrl() {
var url = "http://xxx.xxx.xxx" + dynamic_variables + ".jpg";
return url;}

Most of my research, people display image by click on buttons or what I can do for now is link to the image.

<a href="javascript:window.location=dynamicUrl();">test</a>

Anyone know how to directly display the image using the dynamic URL? Thanks!

• javascript
• html

Share Improve this question Follow asked Jun 3, 2017 at 7:51 Johns M TsaiJohns M Tsai 2311 gold badge11 silver badge55 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Dynamic create DOM for example:

function dynamicUrl() {
  var url = "https://is1-ssl.mzstatic./image/thumb/Purple111/v4/dd/95/7e/dd957e3a-abd3-da8a-2211-726a67108938/source/256x256bb.jpg";
  return url;
}

var img = document.createElement("img");
img.src = dynamicUrl();
document.body.appendChild(img);

Manipulate DOM to dynamic change img url:

function dynamicUrl() {
  var url = "https://www.62icon./client/assets/img/like-icon.svg";
  var img = document.getElementById('imageid');
  img.src = url;
}

<div>
   <p>Image goes here</p>
   <button onclick="dynamicUrl()">Change Image</button>
</div>
<img id="imageid" src="https://is1-ssl.mzstatic./image/thumb/Purple111/v4/dd/95/7e/dd957e3a-abd3-da8a-2211-726a67108938/source/256x256bb.jpg" />

Adding a id for the link element

<a id="link" href="">test</a>

Using click event of link element

var link = document.getElementById("link");

link.onclick = function goToDynamicUrl() {
  var url = "https://image.flaticon./teams/new/1-freepik.jpg";
  window.location.href = url;
}

Here is another method:

<div id="dimg">Here add image</div>
<script>
var dimg = document.getElementById('dimg');
function addImg(dv){
  dimg.innerHTML ='<img src="http://xxx.xxx.xxx'+ dv +'.jpg'" >';
}
addImg('imgname');
</script>

本文标签： How to display dynamic url image in html from which created by javascriptStack Overflow