I have a JSON link that contains various information and a path to an image on the computer and I wanted to load that image into a div in html. I already have code to fetch text from the JSON and put it in the html, but I can't put the image in the html
JSON link:
http://192.168.1.67:1312/results.json
JSON info:
{"CasaFaltas":"5","CasaFaltas.Source":"C:\\Users\\pedro\\Desktop\\Carrega Play\\Scoreboard\\Faltas\\Falta0.png","CasaGolos":"10","Tempo":"2:56","VisitanteFaltas":"3","VisitanteGolos":"11"}
To go get the text, I have the code below. However I don't know how to get the image to make it available in html (however, if you have suggestions for improving my code, I'll gladly accept)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<table class="TabelaTempo">
<tr style="height:20px">
<td style="width:340px"> </td>
<td id="Tempo" style="width:85px; font-size:18px">20:00</td>
<td style="width:44px"> </td>
<td style="width:45px; font-size:18px">1ª P</td>
</tr>
</table>
<script>
function $(a) {
return document.getElementById(a)
}
function ajax(a, b, c) {
c = new XMLHttpRequest;
c.open('GET', a);
c.onload = b;
c.send()
}
function reloadData() {
ajax('http://192.168.1.67:1312/results.json', updateText)
};
function updateText() {
var db = JSON.parse(this.response);
$("Tempo").innerHTML = db.Tempo;
$("CasaGolos").innerHTML = db.CasaGolos;
$("VisitanteGolos").innerHTML = db.VisitanteGolos;
$("CasaFaltas").innerHTML = db.CasaFaltas;
$("VisitanteFaltas").innerHTML = db.VisitanteFaltas;
$("CasaFaltas.Source").innerHTML = db.CasaFaltas.Source;
}
window.setInterval(reloadData, 100);
$('#i_file').change(function(event) {
$("img").fadeIn("fast").attr('src', URL.createObjectURL(event.target.files[0]));
});
</script>
</body>