ifeanyicode's avatar

Array Images refuses to display with css styling despite having the image path

Hi laracsats, im working on a multiple-image form. i am able to upload, and save the image in the database, and on the image path in the public folder, but my problem is displaying the multiple images in view, each time I tried I only get the image path and the image unique names, but they arent displaying, but if I remove the protected casts in the post model and upload, the images will display once I add back the protected cast and refresh the browse. please help here is my controller

,,, public function store(Request $req)

{
    $data = $req->validate([
        'images' => 'required|array',
        'images.*' => 'mimes:jpeg,jpg,png,gif,csv,txt,pdf|max:10048',
        'body' => 'required|string|min:15|max:100',
        'location' => 'required',
        'category' => 'required',

    ]);

    $images = [];

    $user_id = Auth::user()->id;
    $body = $req->input('body');
    $location = $req->input('location');
    $category = $req->input('category');




    if ($req->hasfile('images')) {
        foreach ($req->file('images') as $file) {
            $name = uniqid() . '.' . $file->extension();
            $file->move(public_path() . '/uploads/', $name);
            $imgData[] = $name;
        }




        $post = new POST();
        $post->user_id = auth()->id(); // add this line
        $post->body = $body;
        $post->location = $location;
        $post->category = $category;
        $post->name = json_encode($imgData);
        $post->images = json_encode($imgData);


        $post->save();
        return back()->with('success', 'post  created successfully!');
    }
}

''' here is my model

0 likes
2 replies
ifeanyicode's avatar

HERE IS MY MODEL '''<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model;

class Post extends Model { use HasFactory;

protected $fillable = [
    'name',
    'body',
    'location',
    'images',
    'category'
];

protected $casts = [

    'images' => 'array'

];

'''

ifeanyicode's avatar

HERE IS MY VIEW '''

@foreach($posts as $post)
                <article class="post">
                    <div class="post__header">
                        <div class="post__profile">

                            <a href="#" class="post__avatar">

                                <img src="/uploads/profilephoto/{{$post->user->profilephoto}}" alt="{{$post->user->username}}" />


                            </a>


                            <td> <a href="#" class="post__user">
                                    {{$post->user->name}}
                                </a></td>

                            <td>


                                <div class="bookingword">
                                    <h6>
                                        {{$post->category}}
                                    </h6>

                                </div>
                            </td>

                            <!-- three dot menu <div class="likeicon">
                                <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                            </div> -->


                        </div>



                        <!-- three dot menu -->
                        <td>
                            <div class="dropdown1">

                                <!-- three dots -->
                                <ul class="dropbtn icons btn-right showLeft" onclick="showDropdown()">
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                                <!-- menu -->
                                <div id="myDropdown" class="dropdown-content">
                                    <a href="#home">Save</a>
                                    <a href="#home">Share</a>
                                    <a href="#about">Book</a>
                                    <a href="#about">Edit</a>
                                    <a href="#about">Copy link</a>
                                    <a href="#home">View profile</a>
                                    <a href="#home">Delete</a>
                                    <a href="#about">Report</a>
                                </div>

                            </div>
                        </td>
                    </div>
                    <div class="post__description">
                        <span>


                            <td> {{$post->body}}</td>

                        </span>

                    </div>

                    <div class="post__content">

                        <div class="post__medias">


                            @foreach((array) $post->images as $image){
                            <img td class="post__media" id="post__media" src="{{ asset('/uploads/'.$image) }}" alt="post image">
                            </td>
                            }
                            @endforeach


                        </div>







                    </div>

                    <div class="post__footer">
                        <div class="post__buttons">
                            <button class="post__button">
                                <div class="loveicon">
                                    <span id="icon"> <i class="fa-regular fa-heart"></i></span>

                                </div>
                            </button>

                            <button class="post__button">
                                <div id="myDIV">
                                    <a href="#" class="navbar__button">

                                        <div class="bookicon" id="myDIV"> <i class="fa-regular fa-bookmark"></i>
                                        </div>
                                    </a>
                                </div>
                            </button>


                            <button class="post__button">
                                <div class="shareicon">
                                    <span id="icon"><i class="fa fa-share" aria-hidden="true"></i></span>
                                </div>
                            </button>

                            <div class="post__indicators"></div>

                            <button class="post__button post__button--align-right">

                                <a class="user_location" href="#">


                                    <h4><i class="fa fa-map-marker" aria-hidden="true"></i>&nbsp;&nbsp;
                                        <td>{{$post->location}}</td>
                                    </h4>
                                </a>
                            </button>
                        </div>

                        <div class="post__infos">
                            <div class="post__likes">
                                <a href="#" class="post__likes-avatar">
                                    <img src="assets/default-user.png" alt="User Picture" />
                                </a>

                                <span>
                                    <a class="post__name--underline"> <span id="count">0</span> Like
                                    </a>

                                    &nbsp;<a href="#">73 Views</a></span>
                            </div>



                            <span class="post__date-time">
                                <td>{{$post->created_at->diffForHumans()}}</td>
                            </span>
                        </div>
                    </div>

'''

Please or to participate in this conversation.