Cosa intendi con il punto 2? quelli che ho postato sono i percorsi corretti delle immagini che manda la telecamera.
codice:
<html>
<head> 
<title></title>  
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet"> 
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href='http://fonts.googleapis.com/css?family=Raleway:300,400,500|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800|Roboto:200,300,400,600,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

    
    <link href="css/layout.php" rel="stylesheet" />
    <link href="css/responsive.css" rel="stylesheet" />
    <link href="css/menu.php" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
   <!-- Mobile viewport optimized: j.mp/bplateviewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /><!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"> </script>

<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js">
</script>


<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script>
<!--//--><=!=[=C=D=A=T=A=[//><!--
 $(document).ready(function(){   
        //When btn is clicked
        $(".btn-responsive-menu").click(function() {
            $("#navigation").toggleClass("show");
        });
    
    });
//--><!]=]=>
</script>
 </head>
<div id="wrapper">
    <header id="header">   <div class='logout'><a href="home.php?logout"><i class="material-icons logoutbtn">exit_to_app</i><br>Esci</a></div> 

        <div id="site-title"><a href='home.php'><img src='img/logo.png'>Telecamere</a></div>

        <div class="btn-responsive-menu">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </div>
     
    </header>    
<nav id="navigation" role="navigation">
    
    
    <ul>
 <li><a href='home.php'>Home</a></li>
 <li><a href='rstp.php'>Rstp</a></li>
 <li><a href='ref.php'>Ref</a></li>
 <li><a href='collegamenti.php'>Collegamenti</a></li>
</ul>
    
                 

    </nav>
<div id="main">



 

<script>
const img1 = document.getElementById('img1')
const img2 = document.getElementById('img2')
    setInterval(()=>{
        img1.setAttribute('src','picture.jpg')
        img2.setAttribute('src','picture.jpg')
        console.log('caricata')
    },1000);

</script>

<h4>Cancello 1</h4>
<img src="http://192.168.1.216:8080/picture.jpg" class='imm' id="img1"/>
<hr>
<h4>Cancello 2</h4>
<img src="http://192.168.1.215:8080/picture.jpg" class='imm' id='img2'/>


</div>


<div id="footer"><a href="#"><i class="large2 material-icons">keyboard_arrow_up</i></a></div>
</div>

</body>
</html>