Store an image within a javascript variable?

Question

Fla galera.. someone knows if there is a way to store an image directly in a javascript variable ?

example in the function below

function saudacao(obj) {
    var data = new Date();
    var hora = data.getHours();
    var txt = "";
    // ideia de variavel armanezando imagem 
    var variavelFoto = "img/imagem.png"

    if (hora < 12) {
        txt = "BOM DIA !" + variavelFoto;

    } else if (hora < 18) {
        txt = "BOA TARDE !" + variavelFoto;
    } else {
        txt = "BOA NOITE !" + variavelFoto;
    }

    // aqui abaixo ele insere o valor da variavel txt na div "saudacao" 
    document.getElementById("saudacao").innerHTML = txt;

}

Answer 1

The way you want to do it, using the property innerHTML, one way is to build a tag <img> and stores it within its variable variavelFoto.

function saudacao(obj) {
    var data = new Date();
    var hora = data.getHours();
    var txt = "";

    // Cria uma tag <img> com a imagem que quer exibir e guarda em variavelFoto 
    var variavelFoto = '<img src="https://image.shutterstock.com/image-vector/smiley-face-cartoon-260nw-67126804.jpg" height="42" width="42" style="vertical-align: middle;">';

    // como todos as versões de txt terão variavelFoto adicionado ao final retirei o trecho + variavelFoto; das verificações;
    if (hora < 12) {
        txt = "BOM DIA !";

    } else if (hora < 18) {
        txt = "BOA TARDE !";
    } else {
        txt = "BOA NOITE !";
    }

    // aqui abaixo ele insere o valor da variavel txt na div "saudacao" dentro de um span e adicionei o variavelFoto que retirei das verificações acima.
    document.getElementById("saudacao").innerHTML = '<span style="vertical-align: middle;">' + txt + '</span>' + variavelFoto;

}

<button type="button" onclick="saudacao()">Saudação!</button>
<div align="center" id="saudacao"/>