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

Question

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

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

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

浏览器将如何请求和显示图像？我正在为 html 使用端口 4955。

我是 dart、html 等方面的新手。

这是否允许我更改 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'>";

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

HTML 当前 - 想要将 src ... 替换为 src='displayImage/some_image.png'

  <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

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