1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AWS S3にアップロードした画像ファイルをブラウザで表示する

Posted at

AWSのS3に、自前のコードにて画像(png)ファイルをアップロード。その後、画像ファイルをブラウザにて表示しようとしたところ、画像ファイルがダウンロードされる挙動となってしまいました。

その際の解決方法を自分の備忘として残しておきます。
本来ならば実機で確認すべきなんですが、環境を用意する時間がなかったので、文章のみで記載します。(未来の自分へゴメンナサイ。。)

原因

原因としては、画像ファイルのアップロードの際に使用するputObjectで「Content-Type」を明示的に指定していないためでした。

S3へのアップロードを行う際にContent-Typeを確認してみると、「application/octet-stream」が指定されていました。

これは、バイナリデータを意味しており、特定のMIMEタイプが定義されていない場合や、サーバーがコンテンツの種類を認識できない場合に使用される汎用的なMIMEタイプです。

S3へのアップロード時にContent-Typeを指定していない場合、「application/octet-stream」が既定で設定されるかは探しきれませんでしたが、Content-Typeが「application/octet-stream」になる場合、ブラウザはデフォルトでファイルのダウンロードを行うようです。

対策

対策としては、putObjectにContent-Typeを明示的に指定することです。

今回、ブラウザに表示させたいのは画像(png)ファイルだったので、Content-Typeに「image/png」を指定することで、ブラウザ上の別タブで画像ファイルが表示されます。

以上

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?