So aktualisieren Sie das Bild automatisch auf der Webseite

Question

Ich versuche, ein Bild (von einer IPCAM) auf einer Webseite zu bekommen und es automatisch zu aktualisieren. Ich habe ein Backend gemacht, das eine Funktion hat, die ein Bild liest und zurückgibt. das funktioniert und sieht so aus:

[System.Web.Http.HttpGet] 
[System.Web.Http.Route("dummymethod3")] 
public HttpResponseMessage Get2() 
{ 
    Console.WriteLine("Get image 3"); 
    ddEngine.sem.WaitOne(); 

    HttpResponseMessage response = new HttpResponseMessage(); 

    String filePath = "C:\\Users\\user1\\TestProject\\\\bin\\Debug\\testimage.png"; 
    response.Content = new StreamContent(new FileStream(filePath, FileMode.Open)); // this file stream will be closed by lower layers of web api for you once the response is completed. 
    response.Content.Headers.ContentType = new MediaTypeHeaderValue("image/png");  


    ddEngine.sem.Release(); 

    return response; 

} 

Diese Funktion funktioniert und gibt das Bild zurück. Auf der Client-Seite habe ich Controller, der eine Update-Methode aufruft, die das Image bekommt.

activate(){ 
     setInterval(this.updateStatus.bind(this), 1000); 
    } 

    updateStatus = function() { 
     this.statusService.getImage() 
     .then(data => this.message = data); 
    } 

Und die getImage Methode sieht wie folgt aus:

getImage() { 
    return this.client.get(baseUrl) 
     .then(response => { 
      return response.content; 
    }); 
} 

Die html wie folgt aussieht und zeigt das erste Bild corectly.

<template> 
    </script> 
    <img id="img" src= "http://localhost:8080/api/status/dummymethod3" /> 
</template> 

In meiner benutzerdefinierten OWIN-Middleware füge ich keinen Cache-Wert hinzu.

public async override Task Invoke(IOwinContext context) 
{ 
    context.Response.Headers["MachineName"] = Environment.MachineName; 
    context.Response.Headers.Add("CACHE-CONTROL", new[] {"NO-CACHE"}); 

    await Next.Invoke(context); 
} 

Wenn Sie F5 drücken, wird die gesamte Seite neu geladen und ein neues Bild angezeigt. Ich sehe, dass die ineval-Methode aufgerufen wird und der Back-End-Aufruf aufgerufen wird. Aber das Bild wird nicht aktualisiert.

Hat jemand eine Idee, wie man das Bild aktualisiert? Irgendwelche Ideen sind willkommen!

Answer 1

Ich denke, Sie haben ein bisschen mit wie Sie versuchen, Ihr Problem zu lösen.

Sie verwenden die getImage() Methode, aber dann nichts mit den Ergebnissen zu tun. Also selbst wenn das jede Sekunde ausgelöst wird - es wird nichts tun.

Sie können src.bind und dann eine Funktion verwenden, um die URL zu aktualisieren, um das Bild neu zu laden, ohne das Bild über eine API aufrufen zu müssen.

Ihr HTML;

<img id="img" src.bind="imagePath" /> 

Ihr Javascript;

imagePath = ''; 

activate(){ 
    setInterval(this.updateImageSrc.bind(this), 1000); 
} 

updateImageSrc() { 
    let dt = new Date(); 
    let baseUrl = "http://localhost:8080/api/status/dummymethod3"; 
    this.imagePath = baseUrl + "?t=" + dt.getTime(); 
} 

Dadurch wird jede Sekunde eine neue URL für Ihr Bild erstellt, indem ein Dummy-Abfrageparameter aktualisiert wird. Mit src.bind wird sichergestellt, dass diese URL ständig aktualisiert wird.