如何让浏览器以编程方式加载图像

Question

我有（java）代码，它可以不时地从自定义红外摄像机生成PNG图像，大小相同，目前只是将它们保存在服务器空间之外。它们都具有相同的名称，并且最近覆盖了前一个名称。

我可以在浏览器中向我的dart代码发送一条消息，告知该图像可以自动加载以显示在图像元素中。

我应该创建一个图像文件夹并将其保存在那里吗？

浏览器如何请求并显示图像？我使用端口4955表示html。

我是dart，html等新人。

＆lt; - edit - ＆gt; 这会让我改变DOM吗？

HTML

<div id='image-div'>
    <img alt='' id='image' src='resources/200C-B12.png'
          height='480' width='640'>
</div>

CSS
#image {

}

达特

ImageElement imageElement = querySelector('#image');

我想我想将上面的ImageElement更改为以下内容但不知道如何。

"<img alt='' id='image' src='imageDisplay/myimage.png'
          height='480' width='640'>";

＆lt; - edit - ＆gt;

我尝试了建议的方法来请求图像但没有效果。最近的尝试如下。我有一个语句写入处理HTTP请求的Dart服务器代码中的日志文件，并且当加载页面时有日志条目，当我尝试请求不同的图像时没有。客户端页面确实收到图像的正确路径，因此问题是我仍然没有完成正确的程序。

当前的HTML - 希望将src ...替换为src =＆＃39; displayImage / some_image.png＆＃39;

  <div id='img-box'>
    <div id='image-div'>
      <div id='imgAnchor'>
        <img alt='' id='image' src='resources/fi_12_demo.png'
           height='480' width='640'>
      </div>
    </div>
  </div>

Dart代码片段：

void displayNewImage(imagename) {   
  updateLog('display image = $imagename'); // imagename is correct
  var anchor = querySelector('#imgAnchor');
  anchor.children.clear;
  anchor.append(new ImageElement()
    ..innerHtml="<img alt='' id='image' src='$imagename' height='480px' width='640px'>");
}

我的结论是没有请求从客户端发送到我的Dart服务器。

Answer 1

我认为动态地（通过Dart代码）向您的HTML添加<img src="http://yourserver.yourdomain.com:4955/somefolder/someimg.png">应该可以。如果更新的图像具有相同的名称，则可能会遇到缓存问题（浏览器不会从服务器加载图像，而是将其从缓存中取而代之）。使用新名称存储每个图像可能更容易。