Angular：当图像被删除并且 re-added 时，它不会创建新的请求，并且不会兑现 cache-control header
Angular: When image is removed and re-added, it doesn't create new request, and doesn't honor the cache-control header
我有一个非常简单的 angular 项目，间隔是循环添加图像并在几秒钟后删除它。
图片有 header Cache-control: max-age: 60.
我正在监控页面发送的请求，我看到它在第一次添加图像时只创建了一个请求。
第一次请求后，页面从不验证图像的新鲜度。
所以，如果我在服务器上替换图像，客户端永远不会得到新图像。
这是什么原因，我能做什么？
示例项目：
https://stackblitz.com/edit/angular-cache-control?file=src%2Fapp%2Fapp.component.html
这可能不是最佳解决方案，但您可以通过向查询应用 semi-random 查询参数来欺骗浏览器认为源已更改。
在此示例中，将使用查询参数 ?cacheBust=CURRENT_TIMESTAMP
加载图像
每次您更改 image/toggle 其可见性时，时间戳将更新为新值。
https://stackblitz.com/edit/angular-cache-control-rhcqh5?file=src/app/app.component.html
如果图像变化频繁，那么您需要在图像中添加一些随机字符串url，这样每次它都会获取新图像。
如果图像更改频繁，则添加当前时间戳。
如果图像更改是几天，那么您可以根据日期添加新的随机字符串。
如果您的图像名称是动态的，我的意思是您将从服务器获取图像名称，然后每次更改图像名称，这样它就会得到新的图像。
我的回答：不可能。
可能，brwoser 有一个保存图像的缓存结尾，即使它已从 DOM 中删除。因此，当我再次将他的图像添加到 DOM 时，浏览器不会创建新请求。
我有一个非常简单的 angular 项目，间隔是循环添加图像并在几秒钟后删除它。
图片有 header Cache-control: max-age: 60.
我正在监控页面发送的请求，我看到它在第一次添加图像时只创建了一个请求。
第一次请求后，页面从不验证图像的新鲜度。 所以，如果我在服务器上替换图像，客户端永远不会得到新图像。
这是什么原因，我能做什么？
示例项目：
https://stackblitz.com/edit/angular-cache-control?file=src%2Fapp%2Fapp.component.html
这可能不是最佳解决方案，但您可以通过向查询应用 semi-random 查询参数来欺骗浏览器认为源已更改。
在此示例中，将使用查询参数 ?cacheBust=CURRENT_TIMESTAMP
每次您更改 image/toggle 其可见性时，时间戳将更新为新值。
https://stackblitz.com/edit/angular-cache-control-rhcqh5?file=src/app/app.component.html
如果图像变化频繁，那么您需要在图像中添加一些随机字符串url，这样每次它都会获取新图像。
如果图像更改频繁，则添加当前时间戳。
如果图像更改是几天，那么您可以根据日期添加新的随机字符串。
如果您的图像名称是动态的，我的意思是您将从服务器获取图像名称，然后每次更改图像名称，这样它就会得到新的图像。
我的回答：不可能。
可能，brwoser 有一个保存图像的缓存结尾，即使它已从 DOM 中删除。因此，当我再次将他的图像添加到 DOM 时，浏览器不会创建新请求。