OJS(Open Journal Systems)期刊管理系统，是目前主流和使用广泛的期刊学术系统，在使用OJS系统管理期刊文章的过程中，经常会有同学发现，OJS的相关图片在设置后，总是不能及时更新，比如期刊封面图、期号封面图、期刊Logo、期刊背景图等等。这是怎么回事，什么原因引起的，如何解决呢？今天丁老师就这个问题做一下介绍。

问题描述
当在后台更新相关图片后，OJS网站前台没有更新，常见于网站Logo设置、期刊Logo、期刊封面图、期号封面图等。这种情况第一次上传图片后不会出现，在第一次上传图片后，重新上传的话，后台显示正常，但是网站前台图片还是老的，没有及时更新。

故障原因
经过丁老师分析后，发现这个问题其实并非OJS系统的Bug或故障，根本原因是OJS涉及的相关图片，是在程序中写死的文件名，图片在上传后文件名没有更新，而不管是网站服务器还是我们客户端使用的浏览器都是有缓存的，在图片文件名未变的情况下，相关图片读取的默认是本地缓存。要解决这种问题其实很简单，只需要在浏览器中删除本地缓存，或是强制更新缓存

（直接点击Ctrl+F5）即可。

这个问题并不是故障，严格上来讲，只能说是OJS系统一个不太严谨的地方，首先前端页面不该把图片文件名写死，而是应该做成动态灵活读取的图片文件。其次，即使是把文件名写死也不是不行，但起码在文件名后边加上一个文件版本号，或随机字符串以实现动态更新啊。直接写死文件名的话不强制刷新缓存图片是永远不会变的。

解决方法
该问题涉及两个部分，一个是服务端的图片缓存处理，一个是网站前端的图片动态文件名处理。
1.服务端图片缓存处理，需要对Apache或Nginx进行设置，具体如下。

#Nginx设置
location ~* \.(jpg|jpeg|png|gif|bmp|webp|ico|svg)$ {
    #不缓存图片
    expires -1;
    
    #禁止存储、强制每次校验、代理也不缓存
    add_header Cache-Control "no-store, no-cache, must-revalidate, max-age=0, proxy-revalidate" always;
    add_header Pragma "no-cache" always;
    add_header Expires "0" always;
    
    #闭ETag/304协商缓存，杜绝旧图返回
    etag off;
    if_modified_since off;
}

#Apache设置
<VirtualHost *:80>
    DocumentRoot "/var/www/html"
    ServerName demo.com

    LoadModule headers_module modules/mod_headers.so

    <FilesMatch "\.(jpg|jpeg|png|gif|webp|ico)$">
        Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0"
        Header set Pragma "no-cache"
        Header set Expires "0"
        Header unset ETag
        FileETag None
    </FilesMatch>
</VirtualHost>

2.OJS前端处理，需要对OJS的模板文件进行修改调整，比如header.tpl，设置

#将
<img src="{$baseUrl}/templates/images/structure/logo.png" alt="{$applicationName|escape}" title="{$applicationName|escape}" width="180" height="90" />

#改为
<img src="{$baseUrl}/templates/images/structure/logo.png?t={$smarty.now}" alt="{$applicationName|escape}" title="{$applicationName|escape}" width="180" height="90" />

即在图片文件名后，加上当前时间，这样可以实现每次打开网页时，都会自动重新加载该图片文件，以解决读取缓存的问题。

全文总结
其实这个问题很多同学都遇到过，每次丁老师给他们的解决方法都是直接点击Ctrl+F5（强制更新浏览器缓存），但这种方法遇到大量访客时就无效了，毕竟不可能一个一个去教他们刷新浏览器缓存。所以说最好的方法还是对OJS前端页面进行调整，以实现当图片更新后，自动更新显示出最新的图片。

要实现这个效果，需要先对服务器端进行调整，对服务器的web中间件进行设置，不缓存图片文件。然后再对OJS的模板文件进行修改，找出所有<img>标签，对文件名添加随机字串，相当于每次打开网页，就自动重载图片，以解决图片缓存不更新的问题。

如果你也遇到这个问题，或者是想解决，但不知道从何下手，欢迎联系丁老师咨询交流。