How to Display Image With JavaScript

How to display image with JavaScript?

You could make use of the Javascript DOM API. In particular, look at the createElement() method.

You could create a re-usable function that will create an image like so...

function show_image(src, width, height, alt) {
    var img = document.createElement("img");
    img.src = src;
    img.width = width;
    img.height = height;
    img.alt = alt;

    // This next line will just add it to the <body> tag
    document.body.appendChild(img);
}

Then you could use it like this...

<button onclick=
    "show_image('http://google.com/images/logo.gif', 
                 276, 
                 110, 
                 'Google Logo');">Add Google Logo</button>

See a working example on jsFiddle: http://jsfiddle.net/Bc6Et/

How to Display image in <img> element using javascript?

Inside the function that make you get the array:

function displayImg(array) {
    var img;
    for (var i = 0; i < array.length; i++) {
        img = document.createElement('img');
        img.source(array[i]['Image']);
      document.appendChild(img); // if you want just to append to parent
    }
}

How to easily display Image from Node JS

The problem you face here is not how you read the data, it's how you send the data to Frontend.

First of all, you need to set the headers properly that the frontend (receiver) understands that it's an image and doesn't download that but to show it.

Modified your code here:

const fs = require("fs");
require("dotenv").config();

module.exports = (req, res) => {
    fs.readFile(
        `../backend/images/${req.params.id}`,

        function (err, image) {
            if (err) {
                throw err;
            }
            console.log(image);
           
            res.setHeader('Content-Type', 'image/jpg');
            res.setHeader('Content-Length', ''); // Image size here
            res.setHeader('Access-Control-Allow-Origin', '*'); // If needs to be public
            res.send(image);
        }
    );
};

Display image after select with javascript

Here is a working fiddle for you mate : http://jsfiddle.net/qvxg6ok4/12/

You need to assign a formulated URl property for div's background image with the data url you are getting from the file control.

output.style.backgroundImage = "url('" + reader.result + "')"

This fiddle is with searching with class name : http://jsfiddle.net/qvxg6ok4/14/

Display Images from JSON Array using JavaScript

You need to set the src property to the image instead of setting its innerHTML.

A normal img tag would look something like this:

<img id="image" src="/path/to/image.png">

You need to replicate the same using JavaScript:

document.querySelector("#picture").innerHTML = `${hotelChoice.picture}`
// Becomes
document.querySelector("#picture").src = `${hotelChoice.picture}`

Also, pay attention to the image path inside the JSON file, it should be relative to the HTML document you're using it, not the JavaScript one. So if your images are stored inside a separate directory you should change the path inside your JSON file accordingly.

Example:
If your HTML file is in the project root and there is an images folder, you JSON should be something like:

{
  "hotels": [
    {
      "name": "Something",
      "address": "Some Street, 12",
      "picture": "images/picture_name.jpg"
    }
  ]
}

Display an image in a div with javascript?

Use this, it should work.

<script type="text/javascript">
function image(thisImg) {
    var img = document.createElement("IMG");
    img.src = "images/"+thisImg;
    document.getElementById('imageDiv').appendChild(img);
}
if (a == 'tick') {
    image('tick.gif');
} else {
    image('cross.gif');
}
</script>
<div id="imageDiv"></div>

How to Display Image With JavaScript