Question

我的.svg图片文件已作为image/svg+xml上传到WP媒体库中。 Cloudfront已压缩此文件，当我在html中引用它时，它不会呈现为图像，而是Chrome会提示我下载它。

我的.htaccess：

AddType image/svg+xml .svg .svgz
AddEncoding gzip svgz

Amazon S3属性，元数据：

content-type: image/svg+xml
content-encoding: gzip

从WP上传后，仅手动设置content-type。我必须在更改内容类型后清除cloudfront缓存，因为它最初缓存了类型设置为mime/type（即使它已在Wordpress中正确设置）。 我想避免对其他图片进行此手动处理，但这是以后的担心。

HTML代码：

<p>This renders</p>
<img src="https://s3.eu-central-1.amazonaws.com/mydomain.com/wp-content/uploads/mydrawing.svg" width="300px" height="300px" alt="blabla">

<p>This doesn't render</p>
<img src="http://a9txahw87b8uam.cloudfront.net/wp-content/uploads/mydrawing.svg" width="300px" height="300px" alt="blabla">

的functions.php：

add_filter('upload_mimes', 'custom_upload_mimes');
function custom_upload_mimes ( $mimes=array() ) {
    $mimes['svg'] = 'image/svg+xml'; // this causes cloudfront zipping
    //$mimes['svg'] = 'mime/type'; // this doesn't cause cloudfront zipping
    return $mimes;
}

WP插件的设置：卸载S3：

域：Cloudfront域
将文件复制到S3：开启
重写文件网址：开启
对象版本控制：关闭

问题：

我知道Cloudfront会压缩内容类型为image/svg+xml的文件。但问题是观众没有解压缩它。
如果我将.svg文件作为mime/type上传到WP，那么它永远不会压缩并呈现。但这是正确的方法吗？它感觉不对，这使得无法在博客文章中将该图像设置为精选图像。

非常感谢任何有助于解决或理解问题的帮助！

Answer 1

它现在有效（我所做的一切都是自昨天以来第一次刷新我的浏览器）。我认为这是一个未知的缓存问题。

我说 unknown 因为我清除了CloudFront中的缓存（创建了一个失效）以及我的浏览器。

我也像往常一样通过将svg文件直接上传到S3存储桶而另一个通过WP（通过Offload S3插件）上传来进行小测试。后者是压缩的，前者不是。但两者都呈现。

如何解压缩和渲染通过Wordpress上传并通过cloudfront压缩的svg文件？

1 个答案: