Retrieving and displaying binary images from database laravel - php

Question

I am trying to return the images for each row in my database through the controller
public function getEmotions() {
$emotionsList = Emotions::all();
$images = DB::table('emotions')->select('image')->get();
return $images;
}
This returns the error Malformed UTF-8 characters, possibly incorrectly encoded
I have tried this as a solution
public function getEmotions() {
$emotionsList = Emotions::all();
$images = DB::table('emotions')->select('image')->get();
return utf8_encode($images);
}
But this then returns the error Method Illuminate\Support\Collection::__toString() must return a string value
I'm a but stuck with it now, can anyone see where I'm going wrong?
This data is also being passed to a Vue file where I want to display the images from. Could I add this as {{ emotion.image }}?
<label v-for="emotion in emotions" class="cb-container">{{ emotion.em_name }}
<input name="emotions[]" type="checkbox" :value="emotion.id">
<span class="checkmark"></span>
</label>

Answer 1

$images = DB::table('emotions')->select('image')->get();
The get() method provided by Laravel return an instance of Illuminate\Support\Collection class.
By definition an
Illuminate\Support\Collection class provides a fluent, convenient
wrapper for working with arrays of data.
Documentation
The point is: you need to loop through your $images var and utf8_encode each row separately like
foreach($images as $image) {
...
}
Edit
You may use
public function getEmotions() {
$emotionsList = Emotions::all();
foreach($emotionsList as $emotion) {
$emotion->image = 'data:image/jpeg;base64,' . base64_encode( $emotion->image);
}
return $emotionsList;
}
Usage
... v-for="emotion in emotions" ...
<img src="$emotion->image"/>

Answer 2

You must return a response:
return response($images->toArray());
Or if you want it encoded in json:
return response()->json($images);