Tengo un enlace JSON que contiene información diversa y una ruta a una imagen en la computadora y quería cargar esa imagen en un div en html. Ya tengo código para obtener texto del JSON y ponerlo en el html, pero no puedo poner la imagen en el html
Enlace JSON:
http://192.168.1.67:1312/results.json
Información JSON:
{"CasaFaltas":"5","CasaFaltas.Source":"C:\\Users\\pedro\\Desktop\\Carrega Play\\Scoreboard\\Faltas\\Falta0.png","CasaGolos":"10","Tempo":"2:56","VisitanteFaltas":"3","VisitanteGolos":"11"}Para ir a buscar el texto, tengo el código a continuación. Sin embargo, no sé cómo obtener la imagen para que esté disponible en html (sin embargo, si tiene sugerencias para mejorar mi código, lo aceptaré con gusto)
<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>