

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

[![画像の説明をここに入力](https://i.stack.imgur.com/hBtUi.jpg)](https://i.stack.imgur.com/hBtUi.jpg)

[![画像の説明をここに入力](https://i.stack.imgur.com/eZ9fd.jpg)](https://i.stack.imgur.com/eZ9fd.jpg)

[![画像の説明をここに入力](https://i.stack.imgur.com/iHmJR.jpg)](https://i.stack.imgur.com/iHmJR.jpg)

~controller~

[code]

    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');
        }
    
[/code]

~blade.php~

[code]

    @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
    
[/code]


CC BY-SA 4.0
2020-09-05T08:52:02.327
70159
2020-09-05T08:57:29.630
2020-09-05T08:57:29.630
36669
36669
question
mysql laravel 画像
laravelにおいて、アップロードした画像が表示されない