CODEWITHSUNDEEP
javascriptjqueryhtml
Nikhil Paramane
Nikhil Paramane

Reputation: 1

get and load image from input type url using javascript

I have input type "URL" in my HTML file. How to write JavaScript to fetch image from user entered URL and load it using 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>

i want to load it here:

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

Upvotes: 0

Views: 4748

Answers (2)

Luca Kiebel
Luca Kiebel

Reputation: 10096

You can just change the src attribute of the image:

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

Or, with 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">

Upvotes: 1

Danil
Danil

Reputation: 176

$('#url_submit').click(function(e) {
  e.preventDefault();
  $('.materialboxed').attr('src', $('#image-url').val());
}

Upvotes: 0

Related Questions