Retrieving multiple files and display in Vue component - php

Question

I am processing files by extension and storing images, files, and pdf's inside of respective folders located in the public storage.
Php artisan link:storage has already been run. Files are being properly sorted and stored in the correct locations.
The portion of documentation that says to create the URL link using "echo asset()" is a bit unclear to me and I believe that's where the issue lies. Where am I supposed to echo the asset? I was unable to do so in the vue component.
However, on the front end (Vue Component using Axios to pass data) it seems that the :src is only getting the file path stored in the Database and not grabbing the actual file from the storage location.
Here is the portion of the component where the image should display:
<div v-for="image in post.images" :key="image.id">
<img width="220" height="250" :src=" './storage' + image.post_image_path " />
</div>
Here is my Controller function that stores the images:
public function store(Request $request)
{
// get the data from vue component
$title = $request->title;
$description = $request->description;
$author_id = Auth::user()->id;
$images = $request->images;
// creating the new post with the data above
$post = Post::create( [
'title' => $title,
'description' => $description,
'author_id' => $author_id
]);
// we are receiving an array in the image, we need to do a foreach to grab the files that the image has
foreach($images as $image) {
$name = $image->getClientOriginalName();
$ext = $image->getclientoriginalextension();
// creating the extension so we can filter the query above
$ext_images = array('jpg', 'png');
$ext_files = array('pdf', 'doc', 'docx','txt');
$ext_videos = array('mp4', 'mov', 'avi');
// we are proccesing the images files
if (in_array($ext, $ext_images)) {
$imagePath = Storage::disk('local')->put('/post_images' , $image);
Image::create( [
'post_id' => $post->id,
'post_image_path' => '/local/' . $imagePath,
]);
}
// we are proccessing standard files and saving if
elseif (in_array($ext, $ext_files)) {
$imagePath = Storage::disk('local')->put( '/post_files' , $image);
Image::create( [
'post_id' => $post->id,
'post_image_path' => '/local/' . $imagePath,
]);
}
// we are processing the media files (video) and saving if
elseif (in_array($ext, $ext_videos)) {
$imagePath = Storage::disk('local')->put('/post_videos' , $image);
Image::create( [
'post_id' => $post->id,
'post_image_path' => '/local/' . $imagePath,
]);
};
}
return $post;
With the current controller set up files are organized into their respective folders and storing in the "storage/app/specified folder name". This is working correctly, the only issue retrieving the records after they have been created.
PARTIALLY RESOLVED:
By changing the storage location to:
$image->move(public_path('post_images'), $name);
instead of
$imagePath = Storage::disk('local')->put('/post_images' , $image);
While I have a viable work around, understanding why the storage wasn't working would be greatly appreciated.

Answer 1

The asset helper method is going to return to full proper path of the image folder.
Since you are not calling the method (Or you can't since you are working in a vue component), you have to set the base of your path yourself and concat the image name.
By default Laravel's public directory is the entry point, so this should work, if the image is placed properly:
<img width="220" height="250" :src=" '/storage' + image.post_image_path" />

Answer 2

Saving the image like:
$image->move(public_path('post_images'), $name);
resolved the issue.