如何在由javascript创建的html中显示动态url图像 [英] How to display dynamic url image in html from which created by javascript

问题描述

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

  function dynamicUrl（）{
 var url =http://xxx.xxx.xxx+ dynamic_variables + .JPG; 
 return url;} 
  

我的大部分研究都是通过点击按钮
或我现在可以做的是链接到图像。

 < a href =javascript：window。位置= dynamicUrl（）;>试验< / A> 
  

任何人都知道如何使用动态网址直接显示图片？
Thanks！

解决方案

动态创建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）;  

$ b

操纵DOM以动态更改 img url：

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

< div> < p>图片转到此处< / p> < button onclick =dynamicUrl（）>更改图片< / button>< / div>< img id =imageidsrc =https://image.flaticon.com/teams/new/1- freepik.jpg/>

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!

解决方案

Dynamic create DOM for example:

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

Manipulate DOM to dynamic change img url:

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

这篇关于如何在由javascript创建的html中显示动态url图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！