当我在后端更新服务器对象的图像时,前端不会呈现新图像,因为它与前一个具有相同的 URL



让我更清楚地解释一下。现在,我有一个服务器对象数组,通过它循环并渲染每个服务器的名称和图像。每个服务器都有一个thumbnail属性,该属性包含其映像的URL-http://localhost:3000/images/servers/Test-0dbc1792-2e99-4abf-acd3-b35ede0bef9e/ef026092-ced8-4458-b7c7-5a4131dfcde7.png

现在是我的问题。每当我更新后端服务器的映像时,我只会用新映像替换文件系统上的旧映像。服务器文件夹和服务器映像不会更改其名称,因此该映像的URL不会更改。

当我将更新后的服务器对象返回到前端并用新服务器替换旧服务器时,服务器的映像不会更改。我相信发生这种情况是因为Vue.js看到URL没有改变,因此没有重新渲染图像。尽管URL本身没有改变,但它现在指向一个新的图像,但它没有反映在前端。

很明显,一旦我刷新页面,我就会看到新的图像,但这有点违背了Vue.js的目的。有什么想法可以避免这个问题吗?我想我需要告诉Vue.js以某种方式强制重新渲染图像,但考虑到缩略图URL不会改变,我不确定触发器应该是什么。

浏览器根据URL为您缓存图像。

您可以将时间戳添加到图像URL的最后部分(例如,使用Vue中的数据变量(

http://localhost:3000/images/servers/Test-0dbc1792-2e99-4abf-acd3-b35ede0bef9e/ef026092-ced8-4458-b7c7-5a4131dfcde7.png?timestamp=32132131231

当后端完成更新图像时更新此值,或者如果您不知道后端何时完成更新,则每x秒刷新一次此变量。

相关内容

最新更新