将输入URL提取到img scr

Question

我正在尝试将URL从输入字段获取到img标记的SRC。

<input id="load"> // here we type the URL of image
<input type="submit">
  <img id="my-image" onclick="doit()" src='' />

Answer 1

​

function doit() {
  // get the value of the input
  const {value} = document.getElementById('load');
  // set the src on the img
  document.getElementById('my-image').src = value;
}

img {
  display: block;
}
input {
  min-width: 200px;
}

<input id="load" value="http://placekitten.com/200" />
<button onClick="doit()">go</button>
<img id="my-image" src="" />

​

Answer 2

将您的函数向上移动到提交按钮，而不是图像。

​

function doit(){

  // grab the url from the input
  var url = document.getElementById("load").value;
  
  // load the image from the input url
  document.getElementById("my-image").src = url;
  
}

<input id="load"> // here we type the URL of image
<input type="submit" onclick="doit()">
<img id="my-image"  src='' />

​