获取 img src 的输入 URL

【问题标题】：Fetch input URL to img scr获取 img src 的输入 URL
【发布时间】：2019-09-09 12:38:09
【问题描述】：

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

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

【问题讨论】：

欢迎，但 SO 不是代码编写服务！请描述一下，如果有的话，您尝试了什么并将您的code 插入问题中。如果还没有，请在另一个站点上搜索教程，然后返回给我们，提供一些代码！另请阅读How to Ask

标签： javascript html image src

【解决方案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="" />

【讨论】：

【解决方案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='' />

【讨论】：