如何在网页上自动刷新图片

Question

我正在尝试获取网页上的图像（来自 ipcam）并自动刷新它。我制作了一个后端，它具有读取图像和 returns 的功能。这有效，看起来像这样：

[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;

}

此功能有效，returns 图像。在客户端，我有控制器调用获取图像的更新方法。

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

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

getImage 方法如下所示：

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

html 看起来像这样并正确显示第一张图片。

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

在我自定义的 OWIN 中间件中，我添加了一个无缓存值。

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

按 F5 时，它会重新加载整个页面并获取新图像。我看到调用了 ineval 方法并调用了后端调用。但是图像没有刷新。

有谁知道如何刷新图像吗？欢迎任何想法！

Answer 1

我认为您对尝试解决问题的方式有点困惑。

您正在使用 getImage() 方法，但未对结果进行任何处理。因此，即使每秒触发一次 - 它实际上也不会做任何事情。

您可以使用 src.bind 然后使用函数刷新 URL 来重新加载图像，而无需通过 API 调用图像。

你的HTML;

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

你的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();
}

这将通过更新虚拟查询参数每秒为您的图像创建一个新的 URL。使用 src.bind 将确保此 URL 不断更新。

如何在网页上自动刷新图片

How to refresh image automatically on webpage

html

javascript

asp.net

typescript

aurelia