CDN缓存机制

当你在网站上修改图片并上传新版本时，确保用户能看到更新后的图片，而不是浏览器缓存中旧的版本

1. 清除CDN缓存

1.登录CDN控制面板：访问你所使用的CDN服务的管理控制面板。

2.找到缓存清除选项：在控制面板中找到清除缓存或刷新缓存的选项。

3.选择清除范围：根据需要选择清除特定文件、目录或整个CDN缓存。

4.执行清除操作：执行清除操作，并等待CDN服务更新缓存。

2.修改文件名

1.准备图片：在上传新图片之前，为图片生成一个包含版本号或时间戳的新文件名。例如，如果你的原始图片名为 image.jpg，你可以将其重命名为 image_v2.jpg 或 image_20230401.jpg。

2.上传图片：将重命名后的图片上传到你的网站服务器或图片托管服务。

3.更新HTML/CSS：在你的网页代码中，使用新的文件名替换旧的图片引用。例如，如果你之前使用 <img src="image.jpg" alt="描述">，现在改为 <img src="image_v2.jpg" alt="描述">。

3.使用查询字符串

1.上传图片：将新图片上传到服务器，保持原文件名不变。

2.修改引用：在引用图片的URL后添加查询字符串参数。例如，将 <img src="image.jpg" alt="描述"> 改为 <img src="image.jpg?v=2" alt="描述"> 或 <img src="image.jpg?ts=1680736000" alt="描述">。

3.确保服务器支持：确保你的服务器配置能够识别查询字符串的变化，并提供正确的图片文件。

4.设置HTTP缓存头

1.服务器配置：在你的服务器配置中设置HTTP缓存头。这通常在 .htaccess 文件（对于Apache服务器）或 web.config 文件（对于IIS服务器）中进行设置。

2.示例配置：

• 对于Apache服务器，在 .htaccess 文件中添加：

• <FilesMatch "\.(jpg|jpeg|png|gif)$">
  Header set Cache-Control "no-cache, no-store, must-revalidate"
  Header set Pragma "no-cache"
  Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
  </FilesMatch>

  对于IIS服务器，在 web.config 文件中添加：

  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="DisableCache" />
    </staticContent>
  </system.webServer>

  测试：上传新图片并检查是否正确应用了缓存头。可以使用浏览器的开发者工具查看响应头。

5. 使用构建工具或脚本自动化

1.选择构建工具/脚本：选择适合你项目和工作流的构建工具或脚本语言，如Webpack、Gulp等。

2.编写自动化脚本：编写脚本来自动更改文件名或添加查询字符串。例如，使用Node.js和Gulp，你可以创建一个任务来自动重命名文件并上传到服务器。

3.集成到工作流：将这个自动化过程集成到你的开发工作流中，确保每次更新图片时自动执行。

通过这些步骤，你可以有效地管理网站图片的更新，确保用户总是看到最新版本的图片，同时避免了浏览器缓存和CDN缓存带来的问题。

还是建议大家用更改图片名称，这样方便又快捷