javascript - 使用 javascript 从输入类型 url 获取并加载图像

Question

我的 HTML 文件中有输入类型“URL”。如何编写 JavaScript 从用户输入的 URL 中获取图像并使用 JavaScript 加载它

<div class="url-container">
  <input type="url" class="form-control" placeholder="Insert image URL"   id="image-url">
  <button class="btn btn-default" type="submit" id="url_submit">
    <i class="material-icons">cloud_download</i>
  </button>
</div>

我想在这里加载它:

<img class="materialboxed" src="" id="image" style="">

Answer 1

您只需更改图像的 src 属性即可:

document.getElementById("b").addEventListener("click", e => {
  let imageInput = document.getElementById("image-input");
  let image = document.getElementById("image");
  if (imageInput.value) image.src = imageInput.value;
});

<input type="url" id="image-input">
<button id="b">Change Image</button>
<br>

<img src="" id="image">

或者，使用 jQuery:

$("#b").click(e => {
  let imageInput = $("#image-input");
  let image = $("#image");
  if (imageInput.val()) image.attr("src", imageInput.val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="url" id="image-input">
<button id="b">Change Image</button>
<br>

<img src="" id="image">