MENU
【他サイト】フリーランスエンジニアの教科書
フリーランスエンジニアの教科書
【他サイト】仮想通貨の教科書
仮想通貨の教科書

【超簡単】AWS S3の画像をimgタグで直接URL指定する方法

AWS
いずみ
当ページのリンクには広告が含まれています。
この記事で解決できる悩み
いずみ

こんな悩みを解決できる記事を書きました！

僕は現役フリーランスエンジニア（歴年）で、資格は個保有しています。

結論、imgタグで直接URL指定するにはS3のアクセス権限を変更する必要があります。

本記事を読めば、AWS S3の画像をimgタグで直接URL指定する方法について理解できるので早速見ていきましょう！

いずみ

すぐ読み終わるので、ぜひ最後まで読んでくださいね♪

執筆者／監修者
  • フリーランスエンジニア（保有資格個）
  • ブログ・アフィリエイト歴5年
  • ブランドせどりで月利50万円⇨脱サラ
  • 投資歴5年（仮想通貨・FXが得意）
  • X（旧Twitter）フォロワー約1,900人
  • 運営者情報はこちら
いずみです
目次

AWS S3の画像をimgタグで直接URL指定する方法

早速ですが、AWS S3の画像をimgタグで直接URL指定する方法を解説します。

既にある画像の場合

STEP
S3のアクセス権限を変更

S3のアクセス権限の内、上2つをオフにします。

STEP
オブジェクトのアクセス権限を変更

S3内の公開したいオブジェクトを選択し、↑のように設定します。

いずみ

パブリックアクセスのEveryoneをクリックし、オブジェクトの読み取りをチェックすればOKです。

STEP
オブジェクトURLをクリック

下部に記載されたオブジェクトURLをクリックし、画像が表示されれば設定は完了です。

STEP
直接URL指定する
<img src="{オブジェクトURL}">

↑で画像が表示されればOKです。

新規画像の場合

新規画像をS3にアップロードすると、自動でアクセス制限がかかります。

ですので、新規画像アップロード時はアクセス制限を公開状態に設定する必要があります。

マネージメントコンソールの場合

↑のように設定すればOKです。

AWS SDKの場合

AWS SDKの場合は、putObjectで画像をアップロードする際にパブリック指定をします。

$s3->putObject([
    'Bucket' => $bucket,
    'Key'    => $keyname,
    'Body'   => 'Hello, world!',
    'ACL'    => 'public-read'
]);
いずみ

ACLにpublic-readを指定すればOKです！

注意点として、ACLを設定する場合はIAMロール(権限)にs3:PutObjectAclが必要です。

よくある質問

公開されていないオブジェクトにアクセスするとどうなりますか？

↑のような画面が表示されます。

まとめ

今回は、AWS S3の画像をimgタグで直接URL指定する方法について解説しました。

以下が本記事のまとめになります。

まとめ
  • AWS S3の画像をimgタグで直接URL指定するにはアクセス権限を変更する必要がある。
まとめ♪
いずみ

最後までお読みいただき、ありがとうございました！

  • プログラミングの記事はこちら
プログラミング記事へ
  • クソおすすめ本
世界一流エンジニアの思考法 牛尾剛
¥4,480 （2024/06/01 23:28時点 | Amazon調べ）
Amazon
楽天市場
いずみ

海外のエンジニアがどういった思考で働いているかが理解できます。

海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです（本当におすすめな本しか紹介しないのでご安心を）。

AWS

この記事が気に入ったら
フォローしてね！

シェアしてね！
  • URLをコピーしました！
目次