在 Atom 外部打开时，链接的图像未显示在 HTML 上答案

【问题标题】：Linked images not being displayed on HTML when opened outside of Atom在 Atom 外部打开时，链接的图像未显示在 HTML 上
【发布时间】：2020-10-06 16:51:23
【问题描述】：

这是我在这里的第一篇文章，如果我写的格式有任何问题，我深表歉意。在过去的几天里，我一直在为一个关于带有 atom 和 bulma 的安全摄像头的 html 大学项目开发一个非常简单的页面，将它们链接到 html 时遇到了一些困难，因为即使所有的安全摄像头都是实时视频，对于某些人来说原因，代码只有在图像代码中编写时才会显示它。该代码基本上在 100 多个对象的数组中随机化一个数字并选择 2 个不同的对象，然后它们并排显示，页面每 60 秒刷新一次，显示另一组 2 个图像。问题是，在我完成整个事情后，在 atom-live-server 上完美运行，我保存了它并尝试直接用浏览器打开，这就是我的教授打开的方式，但是那里没有显示媒体而且只有一个图标。尝试将其上传到网站上也是如此。所有安全摄像头链接都来自开放 IP，是 http 并且不受保护，但是当直接在代码之外以及 atom-live-server 上完成时，我可以在浏览器上打开所有这些链接。

下面是 JS 部分的样子：

  script type="text/javascript"

  window.onload = choosePic;

  var myPix = new Array
  ("//180.23.155.164:8082/-wvhttp-01-/GetOneShot?&frame_count=1000000000#.XuE-YLJZhYI.link",
  "//180.220.70.194:1024/-wvhttp-01-/GetOneShot?&frame_count=1000000000#.XujHZZ-5jOU.link",
  "//107.85.194.33:8081/-wvhttp-01-/GetOneShot?&frame_count=1000000000#.XujTCpm4q4M.link",
  "//5.11.180.152:8080/-wvhttp-01-/GetOneShot?&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];

   }

这是正文中的代码：


<body>
   <section class="hero is-fullheight has-background-black">
     <div class="hero-body">
       <div class="container">
         <!--<p href="" class="title is-size-4 has-text-white center">Peek</p>!-->
         <figure class="center">
          <img src="" width="640" height="480" id="myPicture">
          <img src="" width="640" height="480" id="myPicture2">
         </figure>
       </div>
     </div>
   </section>

  </body>

我认为这可能与链接的格式有关，但我不确定。我很感激任何帮助，我对编码和 html 很陌生。提前致谢！

【问题讨论】：

您的浏览器的开发者控制台说什么？有错误吗？
“加载资源失败：net::ERR_FILE_NOT_FOUND”。但如果我真的直接在浏览器上输入相机的链接，它就会打开。我阅读的教程之一指示在编写数组时删除 http:// 部分，您认为这可能与此有关吗？

标签： javascript html ip atom-editor live-streaming

【解决方案1】：

首先从您的<img>s 中删除src= 属性，其次在您的相机URL 地址中使用http://...，因为它们不安全。

有一个摄像头供稿 - 一个有道路和汽车的 - 有时会因为服务器问题而无法加载。其他相机资源都很好。

document.addEventListener("DOMContentLoaded", function(event) { 
  
  // Camera sources - must hasve 'http' if not secured
  var myPix = new Array(
    "http://180.23.155.164:8082/-wvhttp-01-/GetOneShot?&frame_count=1000000000#.XuE-YLJZhYI.link",
    "http://180.220.70.194:1024/-wvhttp-01-/GetOneShot?&frame_count=1000000000#.XujHZZ-5jOU.link",
    "http://107.85.194.33:8081/-wvhttp-01-/GetOneShot?&frame_count=1000000000#.XujTCpm4q4M.link",
    "http://5.11.180.152:8080/-wvhttp-01-/GetOneShot?&frame_count=1000000000#.XujSfteGlxY.link"
  );

  function choosePic() {
    var randomNum = Math.round(Math.random() * myPix.length);
    var randomNum2;

    // Keep generating randomNum2 if randomNum equals randomNum2
    do {
      randomNum2 = Math.round(Math.random() * myPix.length)
    } while(randomNum === randomNum2);

    document.getElementById("myPicture").src = myPix[randomNum];
    document.getElementById("myPicture2").src = myPix[randomNum2];
  }

  // First loading of camera resources
  choosePic();

  // Execute choosePic() every 60000ms = 60s 
  setInterval(choosePic, 60000);
});

<section class="hero is-fullheight has-background-black">
  <div class="hero-body">
    <div class="container">
      <!--<p href="" class="title is-size-4 has-text-white center">Peek</p>!-->
      <figure class="center">
        <img width="640" height="480" id="myPicture">
        <img width="640" height="480" id="myPicture2">
      </figure>
    </div>
  </div>
</section>

【讨论】：

效果很好！谢谢！我不得不稍微调整一下尺寸，但它是在线的。哦，你所说的关于由于服务器而无法加载的图像让我想知道如果选择的图像无法加载，是否有一种编码方法来随机化新图像
好评如潮，再次感谢您！但有时由于连接问题或硬件问题，某些相机无法使用，所以我仍然想知道代码是否有办法在显示之前“测试”图像以避免断开链接