CODEWITHSUNDEEP
javascripthtmlimageinsert
andrikoulas
andrikoulas

Reputation: 87

Display image from a given url

I have an array with 3 cells.At the first cell i have a textarea where you can insert the url of an image.At the second cell i have a button which when you click the image display at the third cell where i have a div to display the image.The question is how can i display the image either from the internet either from local? The code i wrote is:

function loadImage(){
  var mydiv = document.getElementById("idofdivtodisplayimg");
  var url = document.getElementById("idoftextareawhereyouputtheurl");
  mydiv.innerHTML = url.value;
}

Upvotes: 3

Views: 13286

Answers (5)

andrikoulas
andrikoulas

Reputation: 87

I partly solved it by replacing the div at the third cell with an img tag and at the function i wrote above, i chenged it to:

var image = document.getElementbyId("imageid");
var url = document.getElementbyId("urlid");
image.src = url.value;

But at the table i have,i also have a button where you can add a same row as above.How can i do this function for every url that is placed at every textbox?

Upvotes: 0

Luca Kiebel
Luca Kiebel

Reputation: 10096

This does both, it let's you upload an image (or at least load it to the browser) or give a URL to an image source. Click the button and the image is loaded and displayed!

This snippet uses the FileReader API to get the uploaded image and display it in an image element

function uploadOrNot() {
  if (document.querySelector("input[type=file]").files[0]){
    let input = document.querySelector("input[type=file]");
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function(e) {
        display(e.target.result);
      }

      reader.readAsDataURL(input.files[0]);
    }
  } else if (document.querySelector("input[type=text]").value){
     display(document.querySelector("input[type=text]").value);
  }
}

function display(res) {
	let img = document.createElement("IMG");
	img.src=res;
	document.querySelector("#result").appendChild(img);
}
<div id="urlOrUpload">
  <input type="text"/>
  <br> 
  <input type="file" accetp="image/*"/>
</div>
<div id="buttonHolder">
  <button type="button" onclick="uploadOrNot()">Display</button>
</div>
<div id="result"></div>

Upvotes: 0

Patrick Evans
Patrick Evans

Reputation: 42746

In order to do both you would need to change your html and code.

For the case when the user has a url you can just create a new image and append it to your div setting the image's src to the url that was set in the input:

function loadImage(){
  var mydiv = document.getElementById("idofdivtodisplayimg");
  var url = document.getElementById("idoftextareawhereyouputtheurl");
  var image = new Image;
  mydiv.appendChild(image);
  image.src = url.value;
}

Now to get it to display a local image you will need a file input or a drag and drop scheme as you cannot access local files without some type of user interaction.

So you would, for example, need to change your html to include a file input, and grab a reference to the selected file the user selects. Then use FileReader to read the file, and finally display it

HTML

<input type="file" id="imagefile">

JS 

//input reference
var imageinput = document.getElementById("imagefile");
imageinput.addEventListener('change',function (){
  var mydiv = document.getElementById("idofdivtodisplayimg");

  var image = new Image;
  mydiv.appendChild(image);

  //FileReader instance
  var reader = new FileReader;
  reader.addEventListener('load',function(){
     //reader.result will contain a dataURL that can be used
     //like a regular image url
     image.src = reader.result;
  });
  //read the file as a dataURL
  reader.readAsDataURL( imageinput.files[0] );
});

Upvotes: 0

colecmc
colecmc

Reputation: 3318

You can see the sample code will add the images from an array to the document. You could also append the images to any of the elements in your function by using url.appendChild

  var arr = ['http://via.placeholder.com/350x150', 'http://via.placeholder.com/350x250','http://via.placeholder.com/350x350']; // hold image urls in an array.

  arr.forEach(function(item){
      // loop through array and add images to the document.
      var img = new Image();
      img.src = item;
      document.body.appendChild(img);
  });

Upvotes: 0

Mgasmi
Mgasmi

Reputation: 417

<html>
<body>
    <input type="text" id="imagename" value="" />
    <input type="button" id="btn" value="GO" />
    <script type="text/javascript">
        document.getElementById('btn').onclick = function() {
            img = document.createElement('img');
            img.src = document.getElementById('imagename').value;
            document.body.appendChild(img);
        }
    </script>
</body>
</html>

Upvotes: 0

Related Questions