title: Linked images not being displayed on HTML when opened outside of Atom
body: <p>This is my first post here, so I apologise if there's anything wrong with the format I'm writing. I've been developing a very simple page for the past few days for a html university project about security cameras w/ atom and bulma, had a few struggles linking them onto the html because even though all the security cameras are live video, for some reason, the code would only display it if it was written within an image code. 
  The code basically randomizes a number within an array of 100+ objects and chooses 2 different ones, they're then displayed side by side, the page refreshes itself every 60 second, showing another set of 2 images.
  The problem is, after I finished the entire thing, working perfectly on atom-live-server, I saved it and tried to open directly with the browser, which is how my professor is going to open, but there the media isn't displayed and there's only an icon. Same thing with trying to upload it onto a website. All the security camera links come from open IPs, are http and aren't protected, but I could open all of them on the browser when done directly outside the code and also on atom-live-server.</p>
  
  <p>Here's what the JS part is like:</p>
  
  <pre><code>  script type="text/javascript"
  
    window.onload = choosePic;
  
    var myPix = new Array
    ("//180.23.155.164:8082/-wvhttp-01-/GetOneShot?&amp;frame_count=1000000000#.XuE-YLJZhYI.link",
    "//180.220.70.194:1024/-wvhttp-01-/GetOneShot?&amp;frame_count=1000000000#.XujHZZ-5jOU.link",
    "//107.85.194.33:8081/-wvhttp-01-/GetOneShot?&amp;frame_count=1000000000#.XujTCpm4q4M.link",
    "//5.11.180.152:8080/-wvhttp-01-/GetOneShot?&amp;frame_count=1000000000#.XujSfteGlxY.link"
   //there's a lot of links so I'll spare you all of that
  );
  
    function choosePic() {
            var randomNum = Math.round(Math.random()* myPix.length);
            var randomNum2 = Math.round(Math.random()* myPix.length);
            while (randomNum === randomNum2) {
             randomNum2 = Math.round(Math.random()*myPix.length);
  
  
         document.getElementById("myPicture").src = myPix[randomNum];
         document.getElementById("myPicture2").src = myPix[randomNum2];
  
     }
  </code></pre>
  
  <p>and this is the code in the body:</p>
  
  <pre><code>
  &lt;body&gt;
     &lt;section class="hero is-fullheight has-background-black"&gt;
       &lt;div class="hero-body"&gt;
         &lt;div class="container"&gt;
           &lt;!--&lt;p href="" class="title is-size-4 has-text-white center"&gt;Peek&lt;/p&gt;!--&gt;
           &lt;figure class="center"&gt;
            &lt;img src="" width="640" height="480" id="myPicture"&gt;
            &lt;img src="" width="640" height="480" id="myPicture2"&gt;
           &lt;/figure&gt;
         &lt;/div&gt;
       &lt;/div&gt;
     &lt;/section&gt;
  
    &lt;/body&gt;
  
  
  </code></pre>
  
  <p>I think it probably has to do with the format of the links, but I'm not sure. I appreciate any help, I'm very new to coding and html in general. Thanks in advance!</p>