如何显示由html创建的html动态url图像

Question

我试图通过Javascript生成的动态链接直接在HTML中显示图像。

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

大多数我的研究，人们通过点击按钮 还是什么，我能为现在要做的是链接到图像显示图像。

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

任何人都知道如何使用动态URL直接显示图像？ 谢谢！

Answer 1

动态例如创建DOM：

function dynamicUrl() { 
 
    var url = "https://image.flaticon.com/teams/new/1-freepik.jpg"; 
 
    return url; 
 
} 
 

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

操作DOM来动态变化img网址：

function dynamicUrl() { 
 
    var url = "https://www.62icon.com/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://image.flaticon.com/teams/new/1-freepik.jpg" />

Answer 2

添加ID的链接元素

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

使用链接元素

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

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

Answer 3

这里的单击事件是另一种方法：

<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>