How to retrieve images from a database using Laravel

Question

Currently, I am trying to retrieve images from a database table, but without succes. I have already made a table in which I have inserted an image, so that I can retrieve it.

I have looked for an answer to my problem in Stack Overflow. There were similare questions, but the answers werent the one I was looking for. I have also looked for an answer in the Laracast website, but these answers did not provide a solution.

My view:

@extends ('Layout')
@section('title')
    Galerij
@endsection

@section('content')


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">``</script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> 
   </script>
    </head>
    <body>

<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="data:image/png;base64,{{ $image }}" alt="Los Angeles" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="{{asset('Pictures/loremipsum2.jpg')}}" alt="Chicago" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="{{asset('Pictures/loremipsum3.jpg')}}" alt="New York" width="1100" height="500">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

</body>
</html>

@endsection

My model:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class gallerij extends Model
{
    protected $fillable=[
    'afbeelding', 'id'
    ];
}

My create_gallerij__table.php:

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateGallerijTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('gallerij', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->binary('afbeelding');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('gallerij');
    }
}

Hopefully, I have given you enough information to help me find a solution.

Answer 1

To display binary files you have to use base64_encode() function .

Try this :

Controller

$g = Gallerij::find(1);
$image = chunk_split(base64_encode($g->afbeelding));

View

<img src="data:image/png;base64,{{ $image }}">

How to retrieve images from a database using Laravel

Question

1 answers

solution1
0 ACCPTED 2019-06-29 09:18:43

How to retrieve images from a database using Laravel

Question

1 answers

solution1 0 ACCPTED 2019-06-29 09:18:43

solution1
0 ACCPTED 2019-06-29 09:18:43