CloudinaryのエラーをデバッグするにはレスポンスヘッダーのX-Cld-Errorを確認しよう

画像最適化SaaSのCloudinaryの開発中、画像が期待通りに表示されないことがあります。

エラー原因を探るには、画像URLリクエスト時のレスポンスヘッダー x-cld-error を確認してください。

やってみた

試しに、存在しない i_auto という画像変換パラメーターを渡してみます。

$ curl -I https://res.cloudinary.com/demo/image/upload/i_auto/v123/sample.jpg
HTTP/2 400
access-control-allow-origin: *
cache-control: public
content-disposition: inline
content-transfer-encoding: binary
content-type: image/gif
expires: Thu, 12 Sep 2019 16:16:12 GMT
server: cloudinary
status: 400 Bad Request
timing-allow-origin: *
x-cld-error: Invalid transformation parameter - i
x-request-id: c547862dcad3849e
x-ua-compatible: IE=Edge,chrome=1
accept-ranges: bytes
accept-ranges: bytes
date: Thu, 12 Sep 2019 16:15:12 GMT
via: 1.1 varnish
x-served-by: cache-hhn4026-HHN
x-cache: MISS
x-cache-hits: 0
x-timer: S1568304912.922415,VS0,VE215
access-control-allow-headers: X-Requested-With,Range,User-Agent
access-control-expose-headers: X-Cld-Error,Content-Length
content-length: 0

レスポンスヘッダーには

x-cld-error: Invalid transformation parameter - i

というエラーメッセージが含まれ、このパラメーター i が原因であるとわかります。

参考

• Why isn't my image showing up? – Cloudinary Support