如何对图片URL中的“?”编码？已尝试方案无效求解决

我来帮你梳理几个可行的方案，既能解决代理缓存不识别带?的URL问题，又能快速批量处理这25张图片：

直接写%3F导致图片无法显示的核心原因是：服务器会把profile.jpg%3Fw=192当成完整的文件名，而你的服务器上并没有这个文件，所以返回404。通过服务器重写规则，我们可以让服务器把这种编码后的路径，内部转换成带查询参数的请求，既满足代理缓存的无?要求，又能正常加载图片。

具体配置： #

• Nginx：在你的server配置块中添加以下规则

location ~* ^/(.+\.(jpg|jpeg))%3Fw=(\d+)$ {
    rewrite ^/(.*)%3Fw=(\d+)$ /$1?w=$2 last;
}

• Apache：开启mod_rewrite后，在.htaccess中添加

RewriteEngine On
RewriteRule ^(.+\.(jpg|jpeg))%3Fw=(\d+)$ /$1?w=$2 [L]

批量修改前端代码： #

用编辑器的全局正则替换功能（比如VS Code），一键替换所有目标img标签：

• 查找：<img src="(https://example\.com/[^"]+\.jpg)" class="aligncenter" width="(\d+)">
• 替换为：<img src="$1%3Fw=$2">

如果服务器配置不方便修改，你可以直接生成对应尺寸的静态图片，彻底避免查询参数问题。比如把profile.jpg生成profile_192.jpg，前端直接引用无参数的URL，缓存效率最高。

批量生成图片： #

用命令行工具ImageMagick批量处理，进入图片目录执行：

for img in *.jpg; do convert "$img" -resize 192x "${img%.jpg}_192.jpg"; done

之后同样用全局替换修改前端代码，把带width属性的img标签替换成对应后缀的图片URL即可。

如果以上两种方案都无法实施，可以用JS动态修改img的src属性，同时保证图片正常加载：

// 给需要处理的图片统一加个类，比如cache-friendly
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('img.cache-friendly').forEach(img => {
        const width = img.getAttribute('width');
        if (width) {
            const baseSrc = img.src.split('?')[0];
            img.src = `${baseSrc}%3Fw=${width}`;
        }
    });
});

注意要把这段脚本放在body末尾，或者用DOMContentLoaded事件包裹，避免图片提前加载导致的无效请求。

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