含连字符的图片URL可访问但无法通过IMG标签显示的问题求助

问题概述 #

网页中所有不含连字符的图片都能正常显示，但文件名带连字符的图片无法通过<img>标签加载。直接复制图片URL到浏览器地址栏可以正常打开图片，修改文件名去掉连字符后，<img>标签也能正常加载。目前有数千个带连字符的图片，无法批量修改文件名。

已做排查：

• 简化网页至仅保留目标<img>标签，问题依旧
• 在Chrome、Edge测试均出现相同问题
• 清除浏览器缓存、重启Web服务器无效
• 审查元素确认<img>的src属性完全正确

简化后的测试代码 #

<html> 
    <body>       
        <img src="http://localhost/CloerOutdoor/ads/footer/HTE_fleet_program-728x90.jpg" />
     </body> 
</html>

浏览器审查元素结果 #

<html>
<script type="text/javascript">window["_gaUserPrefs"] = { ioo : function() { return true; } }
</script><head>
</head>
<body data-new-gr-c-s-check-loaded="14.1135.0" data-gr-ext-installed="">
    <img src="http://localhost/CloerOutdoor/ads/footer/HTE_fleet_program-728x90.jpg">
</body><grammarly-desktop-integration data-grammarly-shadow-root="true"></grammarly-desktop-integration></html>

解决方案排查方向 #

1. 检查Web服务器的URL重写规则 #

这是最可能的原因，服务器重写规则可能误将连字符识别为特殊分隔符，拦截了<img>的请求：

• Apache：打开.htaccess文件，检查所有RewriteRule，看是否有匹配含-路径的规则，导致请求被重定向或拦截
• Nginx：查看站点配置文件中的rewrite、location块，排查是否存在针对连字符的异常处理逻辑

2. 验证服务器的文件名解析配置 #

部分服务器会对文件名中的特殊字符做过滤或转义：

• Apache：检查AllowEncodedSlashes、FileETag等配置，确认连字符属于允许的文件名字符
• Nginx：确认配置中没有开启disable_symlinks等可能影响文件名解析的选项，同时检查charset设置是否正确

3. 查看Network请求的响应状态 #

打开浏览器F12开发者工具的Network标签，刷新页面后查看图片请求的状态：

• 如果请求返回404，但直接访问URL返回200，说明服务器对<img>的请求（带Referer）和直接地址栏请求处理逻辑不同，大概率是Referer限制或重写规则的问题
• 对比两种请求的请求头，重点看Referer、User-Agent字段，确认服务器是否有基于这些字段的访问控制

4. 尝试编码URL中的连字符 #

虽然连字符是URL合法字符，但可以尝试将-编码为%2D，修改<img>的src：

<img src="http://localhost/CloerOutdoor/ads/footer/HTE_fleet_program%2D728x90.jpg" />

如果此方法有效，可以写个脚本批量替换HTML中所有图片URL的-为%2D，无需修改实际文件名

内容的提问来源于stack exchange，提问作者user20334921