CODEWITHSUNDEEP
phphtmllaravel
Fragrance Resources
Fragrance Resources

Reputation: 37

Display image from the url save in database

Greeting developers, I was trying to create one database to store images. It stores the URL of that image and the insertion is working fine.

Now I want to display the image stored in the database but it just shows image icon and not display the image. The image is stored in the image folder inside the public folder. I really need a favor. Thanks in advance. Below I attach my code:

Form Controller:

public function store(Request $request)

    {

        $this->validate($request, [

                'filename' => 'required',
                'filename.*' => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048'

        ]);

        if($request->hasfile('filename'))
         {

            foreach($request->file('filename') as $image)
            {
                $name=$image->getClientOriginalName();
                $image->move(public_path().'/images/', $name);  
                $data[] = $name;  
            }
         }

         $form= new Form();
         $form->filename=json_encode($data);


        $form->save();

        return back()->with('success', 'Your images has been successfully');
    }
     public function show()
    {

        $users = DB::select('select * from forms');
        return view('display',['users'=>$users]);
    }

Insert page

<form method="post" action="{{url('form')}}" enctype="multipart/form-data">
  {{csrf_field()}}

        <div class="input-group control-group increment" >
          <input type="file" name="filename[]" class="form-control">
          <div class="input-group-btn"> 
            <button class="btn btn-success" type="button"><i class="glyphicon glyphicon-plus"></i>Add</button>
          </div>
        </div>
        <div class="clone hide">
          <div class="control-group input-group" style="margin-top:10px">
            <input type="file" name="filename[]" class="form-control">
            <div class="input-group-btn"> 
              <button class="btn btn-danger" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
            </div>
          </div>
        </div>

        <button type="submit" class="btn btn-primary" style="margin-top:10px">Submit</button>

  </form>        
  </div>


<script type="text/javascript">


    $(document).ready(function() {

      $(".btn-success").click(function(){ 
          var html = $(".clone").html();
          $(".increment").after(html);
      });

      $("body").on("click",".btn-danger",function(){ 
          $(this).parents(".control-group").remove();
      });

    });

</script>

Display Page:

 @foreach ($users as $user)
<img src= url({{url('images/$user->filename')}});}/>
@endforeach

Upvotes: 1

Views: 1032

Answers (3)

Naveed Ali
Naveed Ali

Reputation: 1045

you are encoding the filenames in your controller which is an array so in your blade template you would must decode it first and then loop through it through foreach loop and show it in the img tag. Hope it will help you.

Upvotes: 0

Hamelraj
Hamelraj

Reputation: 4826

if its json do like this

@foreach ($users as $user)
 @php $images = json_decode($user->filename,true); @endphp
   @foreach ($images as $image)
     <img src="{{ url('images/'.$image) }}"/>
   @endforeach
@endforeach

Upvotes: 0

Qamrul Haque
Qamrul Haque

Reputation: 28

Your are storing multiple filenames as json in filename column in forms table. In blade template you're inserting json in img src instead of single filename. As filenames are stored as json so you need to decode json and run foreach for each filename.

@foreach ($users as $user)
    @php $filenames = json_decode($user->filename); @endphp
    @foreach ($filenames as $filename)    
        <img src="{{ url('images/' . $filename) }}"/>
    @endforeach
@endforeach

Upvotes: 1

Related Questions