How can I properly display an image that is in my database?

#1

I’m actually trying to display an image that someone submit via a form, to use it as a profile picture. When I try to display it, it just show a white square so that’s the problem. I have a column “image” in my database and I’m using the “blob” type.

This is were I try to display the image :

  <div class="menu_connect_big_screen">
                <img src="data:image/jpg;base64, {{ Auth::user()->image }}" />
                <p>{{Auth::user()->firstName}} {{Auth::user()->lastName}}</p>
                <a href="{{ url('/my_account') }}">Mon compte</a> | <a href="{{ url('/logout') }}">Se déconnecter</a>
            </div>

This is my controller :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;
use Auth;


class ProfilePictureController extends Controller
{
    public function update(Request $request)
    {

        $request = $request->All();
            User::where('id', Auth::user()->id)
                ->update(
                    [
                        'image' => base64_encode($request['image'])
                    ]
                );
            return redirect()->to('/')->with(['image-changed' => 'Photo de profil modifiée !']);
        }

}

And that’s the form were you can submit the image :

 <form action="{{ route('profilePicture') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div id="profile-container">
                            <image id="profileImage" src="{{url('images/user.jpg')}}" />
                        </div>
                        <input id="imageUpload" type="file"
                               name="image" placeholder="Photo" accept="image/*"  capture>
                        <div class="form-group row mb-0" >
                            <div class="col-md-8 offset-md-4" >
                                <button type="submit"   class="btn btn-primary">
                                    {{ __('Enregistrer') }}
                                </button>
                            </div>
                        </div>
                        </form>

Thanks for your time.

#2

first you should lookup what is really in the database. why are you using BLOB when you convert the image to base64 first? then it’s text. And look if it’s really the image and not just a path. Also the whitespace after base64, looks wrong. so what’s the complete data:... string? should be easy to validate by copy&paste and base64_decode. Do you really need to store the image in the database and not just the path to an uploaded image? your way bursts the data transmitted because you always have to embed the whole image, disabling all caches.

#3

#1: Don’t store image data in a database.
#2: You’ve made no limitations on your form as to size of file being uploaded. See #1.
#3: You haven’t specified the user data is a JPG, but you’ve assumed it in your output.
#4: Upload this picture to your database.
image
Its dataURI is:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAS1BMVEUAAP99ff+MjP+bm/+rq/+4uP+2tv+Bgf94eP+Kiv/Z2f90dP+pqf/Pz//8/P+trf+env+Ojv+UlP+kpP/z8//k5P+Rkf/IyP+ysv8j43sfAAABmUlEQVR4nO3dS04DMRAG4e5kJm9ICI/k/ieFBQvEhgip1apxfb7AX0tLlhzPb++Hp9ttnuf7NE2n9beP1U/7/Lft6k/X9QMu0wPO82+bQ9xj2Y4xdU8olgMUvnZPKJax7p5QzEI+C/ks5LOQz0K+EQqv3ROKZay6JxSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5Rijcd08oll9n2Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQr6MbfeEYiO8GFr+qy8L6Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5DPQj4L+Szks5Av46V7QrER/pmxkM5CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkG+Ewkv3hGIZp+4JxTKm7gnFLOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOSzkM9CPgv5LOTLOHdPKJax6Z5QLGPunlDMQj4L+Szks5DPQj4L+SzkG6Fw6TfgXRyOuWS7+RMbngfaJ7q5GAAAAABJRU5ErkJggg==" alt="" />
The picture will not render due to the error in #3, do you get the correct output?

1 Like
#4

How do I store it if it’s not in a database ?

#5

https://www.php.net/manual/en/features.file-upload.post-method.php

#6

Just store it on the server and then store just the filename. The filename should be sufficient enough to look up in your PHP code.

1 Like
#7

And in case you have multiple servers, store it in a storage bucket, like AWS S3, Google Cloud Storage, etc.

1 Like