【发布时间】：2016-01-02 18:31:55
【问题描述】：
我有一个网页，它接受一些用户输入并使用它通过 PHP 运行 shell 脚本来更新图像。该图像然后显示给用户，而不刷新他们所在的页面（使用 ajax 请求）。大意是：
- 用户在网页上进行选择
- 网页向服务器发送 ajax 请求
- PHP (laravel) 捕获 ajax 请求并运行 shell 脚本来更新图像
- PHP 返回 ajax 响应并说明图像是否已更新
- 如果图像已更新，javascript 会使用以下代码为用户刷新图像：
$("#back_thumbdiv_med").find("> img").attr("src", url + "?" + new Date().getTime());
问题是图像无法正确加载。这是加载图像的示例。
有趣的是，显示的图像部分实际上是旧图像的一部分，而不是新图像的一部分。这可能是什么原因造成的？我该如何解决？这可能与我的网站通过 vagrant 在 VM 上运行有关吗？
另外，如果用户离开页面并返回，图像显然会返回到旧版本，因为它被缓存了。我希望缓存图像，但能够在 ajax 请求返回后强制刷新。什么
【问题讨论】：
-
当您直接在浏览器中查看图像时会发生什么（输入它的 url。您是否查看了服务器上的图像？很可能是您的 shell 脚本出了问题，什么也没有完全与你的javascripts有关
-
如果我在浏览器中导航到该 URL，我会得到截断图像，即使我附加了一个不同的随机查询字符串。直接在服务器上查看文件，但是可以看到没有缺陷的完整图像。这似乎是某种服务器端缓存问题，也许它在内存中有一个缓存副本，它在脚本写入文件时读入，因此已损坏。
-
但是为什么要通过脚本传递图像？为什么不将生成的图像放在单独的文件夹中并将其视为静态项？这样你就可以避免这些问题。
-
脚本生成图像。它为用户更新了一些渲染。渲染是同一个对象，所以最好让图像路径保持不变，只改变图像。根据用户的最终选择，还可以从其他地方访问图像。一旦生成了新的渲染，就不再需要旧的渲染，因此在这种情况下，像您建议的那样制作副本实际上没有意义。
-
我并不是都建议您制作副本。我的建议是停止通过脚本传递图像。图片应作为静态网址提供。您已经解释了您的图像创建、显示是一个两步过程，所以这应该很容易实现。
标签： javascript image caching browser-cache corruption