Q&A
画像は外部サービスではなくマークダウンの画像添付機能を利用してください。
やりたいこと
TOPページのメイン画像を表示させたいです。
試したこと
app.blade.phpの中に、 @yield('content')でhome.blade.phpを読み込む形でトップページを表示しています。
登録しているコンテンツの画像は表示されるのですが、メインビジュアルだけ表示されなくて困っています。。。以下、コードです。
app.blade.php
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CatsClover</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- ↓今回記載 --> <link rel="stylesheet" type="text/css" href="/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="/css/mysheet.css"> <!-- bootstrap-datepickerを読み込む --> <link rel="stylesheet" type="text/css" href="../bootstrap-datepicker-1.6.4-dist/css/bootstrap-datepicker.min.css"> <script type="text/javascript" src="../bootstrap-datepicker-1.9.0-dist/js/bootstrap-datepicker.min.js"></script> <script type="text/javascript" src="../bootstrap-datepicker-1.9.0-dist/locales/bootstrap-datepicker.ja.min.js"></script> </head> <body> @include('commons.navbar') <div class="container"> @include('commons.error_messages') @yield('content') </div> @include('commons.footer') <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script> </body> @yield('script2') </html>
home.blade.php
@extends('layouts.app') @section('content') <div class="center jumbotron"> <div class="text-center"> <img src="https://catsclover.s3.amazonaws.com/myprefix/main.jpg"> <h1>mainimage</h1> </div> </div> <h4>家族募集中のCats</h4> @if (count($cats) > 0) @foreach ($cats as $cat) <img src="{{ $cat->mainimage_path }}"> {{ $cat->name }} {{ $cat->gender }} {{ $cat->age }}歳 {{ $cat->feature }} @include('commons.apply_button', ['cats' => $cat]) @endforeach {{ $cats->links('pagination::bootstrap-4') }} @endif @endsection
css
.jumbotron { width: auto; height:400px; margin:auto; }
結果
https://gyazo.com/52cec43a0e906a6ae3aaab633befea51
画像が表示されません・・・
↓家族募集中のcatsの画像は表示されてます
https://gyazo.com/8bd893e9d73611a5d4f9c10ba83d1d5a
画像はs3でアップロードしてまして、URLをブラウザに打ち込むと表示されます
https://gyazo.com/e6418b2c4fd88524a92d102118a825ec
ディベロッパーツールを見ると、画像のURLがないようです。。home.blade.phpには記載しているのですが・・
https://gyazo.com/fa038b533655d31de1359dcb6881c091
アドバイスいただけると嬉しいです。
よろしくお願いいたします・・・
自己解決
