Develop Reference

Unable to display multiple uploaded images in HTML

I'm trying to upload multiple images onto my webpage but I'm having trouble understanding how to get a valid URL for the source of the image and to check if the number of files uploaded is correct. How should I go about doing so? Here is a sample of the code I have written:
<div id = "image_display">
<input type="file" id="image" name="image" multiple>
</div>
const img = document.getElementById('image');
const display = document.getElementById('image_display');
img.onchange = evt =>{
const [file] = img.files;
if(file){
const newImg = document.createElement('img',{
src : URL.createObjectURL(file)
})
display.appendChild(newImg)
}
}

You need to break-up the creation of the image.
use document.createElement to create the image
set the new image's src
const newImg = document.createElement('img');
newImg.src = URL.createObjectURL( file );

JS Function to swap Image

Using a pre-trained model for image classification, I created a webpage that in theory will allow the user to browse their computer for a image and when that image is selected, it is automatically processed and the top three responses for what that image most likely is displayed on the webpage along with the probability for each. My JS function is probably very wrong, I’m somewhat self-taught. I’m also using materializecss and tensorflow.js if it helps.
I’m having trouble with changing the image I currently have hard coded there with the chosen image of the user.
HTML
<div name="imagePost" class="offset-s1 col s6">
<img class="responsive-img" id="changeImage" src="images/dog.jpg" alt="description">
<input type="file" name="pickImage" onchange="swapImage(pickImage)">
</div>
JS Function
function swapImage (pickImage) {
var image_toShow = pickImage;
document.getElementById('changeImage').innerHTML = image_toShow;
}

Here is how you can swap the image
function swapImage(event) {
var selectedFile = event.target.files[0];
var reader = new FileReader();
const img = document.getElementById("changeImage");
reader.onload = function(event) {
img.src = event.target.result;
};
reader.readAsDataURL(selectedFile);
}

Thanks for the help and suggestions. I ended up using a file reader, eventlisteners, and actually creating the img tag in another js function. Ill share it below incase it could help others. So the html part just has a empty div and js reads the input file and creates a img tag with the uploaded photo.
<div name="imagePost" class="offset-s1 col s6">
<fieldset>
<div id="changeImage">
</div>
</fieldset>
<input type="file" id="pickImage">
<a class="btn-large black col s4 offset-s1 unselect" onclick="app()">Calculate</a>
</div>
</div>
window.onload=function()
{
var y = document.getElementById("pickImage");
y.addEventListener('change', loadimage, false);
}
function imageHandler(e2)
{
var store = document.getElementById('changeImage');
store.innerHTML='<img id="newImage" class="responsive-img" src="' + e2.target.result +'" alt="The image here is interchangeable, allowing for users to process many different images using the machine learning model.">';
}
function loadimage(e1)
{
var filename = e1.target.files[0];
var fr = new FileReader();
fr.onload = imageHandler;
fr.readAsDataURL(filename);
}

Using a var in an <img src> tag

I've been trying to work out my own photo album when I encountered an error. It's a syntax error but after trying out a number of different ways of writing the code it just wont work.
Here's what I did. I made a var image which contains the string file path (using string manipulation) of the image (I am not to use PHP just yet, so it can only accept photos from a given folder named "images" on the base directory) and another var imgSource to contain the actual image itself using the var image.
The code is:
var image = "images/" + $(".inputImage").val().split('\\').pop();
var imgSource = $('<img src = image alt = "Image not found" class = "card-img-top">');
for some reason, even without the apostrophes, the tag reads the word image as the filepath (string) not as variable I've created.

You would use
var imgSource = $('<img src="' + image + '" alt="Image not found" class="card-img-top">');

var image = "images/" + $(".inputImage").val().split('\\').pop();
var imgSource = $('<img src="' + image + '" alt="Image not found" class="card-img-top">');

Fetch and add img attributes to string

I have a string like this.
x = '<div class="sample">
<img src="http://www.example.com/i/java.png">
</div>
<div class="sample_another">
<img src="/i/somedir/python.png">
</div>'
I want to convert to this
x = '<div class="sample">
<img src="http://www.example.com/i/java.png" height="200px" width="100px">
</div>
<div class="sample_another">
<img src="/i/somedir/python.png" width="150px" height="150px">
</div>'
input string will be a html doc. for all the images in the doc, i want to add the height and width property. and to get the height and width property i have to use something like this
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = 'http://www.example.com/intl/logo.gif';
p.s. i tried using this solution but the problem i face is that the string might have the script tag and DOM parses it as a closing script tag. I cant find much for regex either. So is there any other way to obtain this result ?
Thanks.

If you can remove scripts than go with this code:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
var string ="<script type"text/javascript"></script><img alt=''
src='http://api.com/images/UID' /><br/>Some plain text<br/><a
href='http://www.google.com'>http://www.google.com</a>";
var elem= document.createElement("div");
$(string).find('script').remove();
elem.innerHTML = string;
var images = elem.getElementsByTagName("img");
for(i=0; i<images.length; i++){
images[i].width = "150";
images[i].height = "250";
}
string = elem.innerHTML;
Problem you are facing with is that it turns out that HTML5 does not allow script tags to be dynamically added using the innerHTML property. So you will need to add them dynamically on some other way.
This is some code that might help you:
var my_awesome_script = document.createElement('script');
my_awesome_script.setAttribute('src','http://example.com/site.js');
document.head.appendChild(my_awesome_script);

Find a element and append a image

I know how to append a image to a known tag. e.g.
//html
<div class="ImageContainer"></div>
//JS
var image = new Image;
image.src = '/Public/Images/image.png';
image.appendTo($('.ImageContainer'));
but how to find a certain tag(the figure tag here) and append the image?
I could locate the figure tag with '.find()':
var ImageContainer = $('<div><figure></figure></div>').
console.log(ImageContainer.find('figure').html());
but failed to append the image to it:
image.appendTo(ImageContainer.find('figure')); //doesn't work

If you have an image element with an id you can select it like so:
var $image = '<img src="/Public/Images/image.png" />';
Then so find the figure elemnt:
$(ImageContainer).find('figure').append($image);

Try below code.
1) Stored image url in variable name $img.
2) Find the div using class name 'image' ($('.image'))
3) Appended image to div
HTML
<div class="image"> </div>
JS
var $img = '<img src="https://skypeblogs.files.wordpress.com/2013/05/skype-button.png"/>';
$('.image').append($img);
JSFIDDLE DEMO

if you are using jquery, you can just do
var htmlString = '<div><figure><img src="some image src" /></figure></div>';
$('#ImageContainer').html(htmlString);
but if you are wanting to insert the div/figure and image separately, then you'd be best giving it some sort of identifier, i.e.
var htmlString = '<div><figure id="myFig"></figure></div>';
$('#ImageContainer').html(htmlString);
$('#myFig').html('<img src="" />');