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

时间:2014-12-03 00:19:42

标签: dart dart-html

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

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

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

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

我是dart,html等新人。

< - edit - > 这会让我改变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服务器。

1 个答案:

答案 0 :(得分:1)

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