get and load image from input type url using javascript

Question

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

Luca Kiebel · Accepted Answer · 2018-07-20 10:38:41Z

1

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

answered Jul 20, 2018 at 10:38

Luca Kiebel

10.1k7 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nikhil Paramane Over a year ago

that worked for me. Also How Can I encode this image fetched from url to base64? Help will be really appreciated.

Luca Kiebel Over a year ago

You might want to check out this other question for that

Danil · Accepted Answer · 2018-07-20 10:38:32Z

0

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

answered Jul 20, 2018 at 10:38

Danil

1761 gold badge3 silver badges6 bronze badges

1 Comment

Harsha Biyani Over a year ago

Please add explanation

Collectives™ on Stack Overflow

get and load image from input type url using javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related