0

現在、地図に飲食店の情報を位置情報と共にアップするサービスを開発しています。その中で、その飲食店の画像もアップロードしたいのですが、
表示されるのは画像ではなく、文字列になってしまいます。お力を貸して頂きたく思っています。
ホーム画面から、画像ファイルを送信すると、それがmysqlのカラムに挿入されます。そして、データベースから値を持ってきて画面に表示したいです。
本来ならば下画面に写真が表示されるはずなのですが、ごらんのとおり、文字列となって表示されてしまいます。

画像の説明をここに入力

画像の説明をここに入力

画像の説明をここに入力

~controller~

public function store(Request $request, College $college)
    {
        $this->validate($request, [
            'address' => "required",
            'good_point' => "required",
            'name' => "required",
            'file' => "required|file|image|mimes:jpeg,png,jpg",
        ]);
        $filename = $request->file->store('public/img');
        $college->pic = basename($filename);
        $college->user_id = Auth::user()->id;
        $college->timestamps = false;
        $college->name = $request->name;
        $college->good_point = $request->good_point;
        $college->address = $request->address;
        $college->save();
        return redirect('/home');
    }

~blade.php~

@extends('layouts.app')
    <style>
        #data, #allData {
            display: none;
        }
        .l-top__ablebox__item_text {
            font-size: 16px;
        }
        .u-ls__sm {
            letter-spacing: 0.3px;
        }
    </style>
@section('content')
    <div class="container">
        <?php
            require '../education.php';
            $edu = new education;
            $coll = $edu->getCollegesBlankLatLng();
            $coll = json_encode($coll, true);
            echo '<div id="data">' . $coll . '</div>';

            $allData = $edu->getAllColleges();
            $allData = json_encode($allData, true);
            echo '<div id="allData">' . $allData . '</div>';            
        ?>
        <h3 class="u-ls__sm l-top__ablebox__item_text">地図</h3>
        <div id="map" style="width: 500px; height: 400px;"></div>
    </div>
    <div class="container">
        <h3 class="u-ls__sm l-top__ablebox__item_text">あなたがオススメする飲食店の情報を入力してください</h3>
        <form id="home-save" action="{{route('home-save')}}" method="POST" enctype="multipart/form-data">
            {{csrf_field()}}
                <input class="form-control" type="text" name="name" id="name" placeholder="あなたがオススメする飲食店の名前を入力してください" value="{{$college->name}}">
                <input class="form-control" type="text" name="address" id="address" placeholder="あなたがオススメする飲食店の住所を入力してください" value="{{$college->address}}">
                <textarea rows="10" class="form-control" type="text" name="good_point" id="good_point" placeholder="あなたがオススメする飲食店の具体的な情報・良いところをみんなに紹介してください">{{$college->good_point}}</textarea>
                <img class="profile-pic" src="{{ asset('public/img/'.$college->pic) }}" alt="">
                <input type="hidden" name="file_type" value="img">
                <input type="file" id="images" name="file" class="form-control">
                <label>画像をアップロードしたい場合はこちら</label>
                <input type="submit" name="submit" class="btn btn-sm btn-primary pull-right" value="送信">
        </form>
    </div>
<script>
    var map;
    var geocoder;
    var icon;

    function initMap() {
        var windinfo = new google.maps.InfoWindow;
        var cont = "現在地";
        var pune = {lat: 35.6938, lng: 139.7034};
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: pune
        });

        var marker_two = new google.maps.Marker({
            position: pune,
            map: map
        });

        marker_two.addListener('mouseover', function() {
            windinfo.setContent(cont);
            windinfo.open(map, marker_two);
        });

        var cdata = JSON.parse(document.getElementById('data').innerHTML);
        geocoder = new google.maps.Geocoder();  
        codeAddress(cdata);

        var allData = JSON.parse(document.getElementById('allData').innerHTML);
        showAllColleges(allData);
    }

    function showAllColleges(allData) {
        var infowind = new google.maps.InfoWindow;
        Array.prototype.forEach.call(allData, function(data){
            var name = data.name;
            var address = data.address;
            var good_point = data.good_point;
            var pic = data.pic;
            var content =  "<img src='{{ asset("storage/img/". $college->pic) }}' class='img-circle img-responsive chat-item-img'>" + name + "<br>" + address + "<br/>" + good_point;
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(data.lat, data.lng),
                map: map
            });
            marker.addListener('mouseover', function() {
                infowind.setContent(content);
                infowind.open(map, marker);
            });
        })
    }

    function codeAddress(cdata) {
    Array.prototype.forEach.call(cdata, function(data){
            var address = data.name + ' ' + data.address;
                geocoder.geocode( { 'address': address}, function(results, status) {
                    if (status == 'OK') {
                        map.setCenter(results[0].geometry.location);
                        var points = {};
                        points.id = data.id;
                        points.lat = map.getCenter().lat();
                        points.lng = map.getCenter().lng();
                        updateCollegeWithLatLng(points);
                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
            });
    }

    function updateCollegeWithLatLng(points) {
        $.ajax({
            url: "/action",
            headers: {
                'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
            },
            method: "post",
            data: points,
            success: function(res) {
                console.log(res)
            }
        })  
    }
</script>
@endsection
6
  • 画像は該当のディレクトリにアップロードされていることはサーバから確認できますか?
    – keitaro_so
    Commented 2020年9月6日 12:58
  • 確認できます!!
    – Yuki
    Commented 2020年9月7日 3:16
  • であれば画像はディレクトリに保存されているので、参照がうまくいっていない系ですかね?imgタグを出力しているところでエラーが発生していたり、imgタグで参照している画像のURLがエラーになっていたりはしていないですか?
    – keitaro_so
    Commented 2020年9月7日 3:35
  • 「404 not found」 と出るので、パスが見つかっていないのかと思っていますが、解決策が分かりません、、、
    – Yuki
    Commented 2020年9月7日 3:53
  • 保存はpublic/imgですけど、参照もexample.com/public/img/であっていますか?publicがドキュメントルートならexample.com/img/XXX.jpgではないかと
    – keitaro_so
    Commented 2020年9月7日 4:09

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。