Right now I have the code that looks like this, I access the assets folder, which is inside public:
<div class="itemProjectImage" :id="'itemProjectImage_'+i" :style="'background-image:url(/assets/img/projects/'+project.slug+'/home.jpg'">
</div>
What I would like would be to directly access storage, but with vue:
<p class="lead"><img src="{{ asset('/storage/employees/'.$employee->slug.'/'.$employee->slug.'.'.'jpg') }}" width="50%" ></p>
What would be the right way?
I can think of many ways to do this, but everything depends on what the system requires, image confidentiality, etc.
// Ruta
Route::get('images/{filename}', 'ImagenesController@imagen'); // Deberias de usar un middelware '->middleware('auth')'
// controlador
public function imagen($slug)
{
$path = storage_path() . '/employees/' . $slug .'jpg'; // Podés poner cualquier ubicacion que quieras dentro del storage
if(!File::exists($path)) abort(404); // Si el archivo no existe
$file = File::get($path);
$type = File::mimeType($path);
$response = Response::make($file, 200);
$response->header("Content-Type", $type);
return $response;
}
// en el componente
<template>
<p class="lead"><img src="'/imagen/${this.employee.slug}'" width="50%" ></p>
</template>
Another option may be to convert the image to base64 in the controller and return a string and you can call it from the component using ajax
methods: {
getImage(slug) {
var imagen = ''
axios.get('/imagen/${this.employee.slug}')
.then(function(response) {
imagen = response.data
})
.catch(function(error) {
fail(error)
})
return imagen
}
}
You only need to set up a route in Laravel, for example:
Route::get('myRoute/{myImage}','myController@anyThing');
on the image tag you do it like this:
<img :src="'myRoute/myImage.jpg'">
If your controller works with that, it's enough, I hope your project works for you.