How to have the browser load an image programmatically

Issue

I have (java) code that generates PNG images from a custom infrared camera from time to time all the same size and, at the moment, just saves them outside the server space. They all have the same name and the most recent overwrites the previous one.

I can send a message to my dart code in the browser that an image is available for automatic loading for display in an image element.

Should I create an image folder and save them there?

How would the browser request and display the image? I’m using port 4955 for html.

I’m new at dart, html etc.

<– edit –>
Will this allow me to change the DOM?

HTML

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

CSS
#image {

}

Dart

ImageElement imageElement = querySelector('#image');

I think I want to change the above ImageElement to this the below but don’t know how.

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

<– edit –>

I have tried the suggested methods to request the image but none works. The most recent attempt is below. I have a statement that writes to a log-file in the Dart server code that handles HTTP requests and, while there are log entries made when the page page is loaded there are none when I try to request a different image. The client page does receive the correct path to the image so the problem is that I still don’t grok the correct procedure.

HTML currently – want to replace src … to 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 code fragment:

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'>");
}

I conclude that no request is being sent from the client to my Dart server.

Solution

I think adding an <img src="http://yourserver.yourdomain.com:4955/somefolder/someimg.png"> to your HTML dynamically (by Dart code) should do. If the updated images have the same name you might run into caching issues (the browser doesn’t load the image from the server but loades it from the cache instead). It might be easier to store each image with a new name.

Answered By – Günter Zöchbauer

Answer Checked By – Willingham (FlutterFixes Volunteer)