I am working on Laravel project API and I am using the Storage to store images and I need to retrieve the links and send the links to the frontend, but when I use the links in src img attribute it's not working

$destination = Destination::findOrFail($id);

$destination_images = $destination->destination_images;

$urls = [];

foreach ($destination_images as $destination_image) {
    $link = Storage::disk('public')->path($destination_image->img);
    array_push($urls, $link);
}

return response()->json($url);

This is the array of links

[
    "C:\\xampp\\htdocs\\rindextwo\\storage\\app/public\\destination-F2QSioUxe2.jpeg",
    "C:\\xampp\\htdocs\\rindextwo\\storage\\app/public\\destination-vRvimgsiMJ.png"
]

When I enter the links in browser it shows the images successfully

but when I use it in the Angular project it's not working

Is there anything or process I must done before passing the links to the frontend?

This is the browser dev-tools inspection of the image when I enter the image link manually in the browser search bar

The whole controller code

<?php

namespace App\Http\Controllers\admin\dashboard\setup\locations;

use App\Http\Controllers\Controller;
use App\Models\admin\dashboard\setup\locations\Destination;
use App\Models\admin\dashboard\setup\locations\DestinationImage;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Facades\Validator;
use Illuminate\Support\Str;

class ApiDestinationController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $destinations = Destination::get();

        return response()->json($destinations);
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'name' => 'required|string|max:100',
            'description' => 'nullable|string',
            'fileSource' => 'required'
        ]);

        if ($validator->fails()) {
            $errors = $validator->errors();
            return response()->json($errors);
        }

        $destination = Destination::create([
            'name' => $request->name,
            'description' => $request->description
        ]);

        foreach ($request->fileSource as $img) {
            $extension = explode('/', explode(':', substr($img, 0, strpos($img, ';')))[1])[1];
            $replace = substr($img, 0, strpos($img, ',') 1);
            $image = str_replace($replace, '', $img);
            $image = str_replace(' ', ' ', $image);
            $imageName = 'destination-' . Str::random(10).'.'.$extension;
            Storage::disk('public')->put($imageName, base64_decode($image));
            DestinationImage::create([
                'destination_id' => $destination->id,
                'img' => $imageName
            ]);
        }

        return response()->json('Destination Created Successfully');
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        $destination = Destination::findOrFail($id);

        $destination_images = $destination->destination_images;

        $urls = [];

        foreach ($destination_images as $destination_image) {
            //$link = Storage::disk('public')->path($destination_image->img);
            $link = public_path('storage/'.$destination_image->img);
            array_push($urls, $link);
        }

        $response = [];

        array_push($response, $destination, $urls);

        return response()->json($response);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $validator = Validator::make($request->all(), [
            'name' => 'nullable|string|max:100',
            'description' => 'nullable|string'
        ]);

        if ($validator->fails()) {
            $errors = $validator->errors();
            return response()->json($errors);
        }

        $destination = Destination::findOrFail($id);

        $destination->update([
            'name' => $request->name,
            'description' => $request->description
        ]);

        return response()->json('Destination Updated Successfully');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $destination = Destination::findOrFail($id);

        $destination->delete();

        return response()->json('Destination Deleted Successfully');
    }
}

CodePudding user response：

Controller

public function store(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'name' => 'required|string|max:100',
            'description' => 'nullable|string',
            'fileSource' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048'
        ]);

        if ($validator->fails()) {
            $errors = $validator->errors();
            return response()->json($errors);
        }
        
        $image = $request->file('fileSource');

        $imageName = $image->getClientOriginalName();       
        $destinationPath = public_path('storage');
        $image->move($destinationPath, $imageName);
        
        Destination::create([
            'name' => $request->name,
            'description' => $request->description,
            'image' => $image
        ]);
        
        return response()->json('Destination Created Successfully');
    }

CodePudding user response：

Absolute paths (filesystem paths) won't work with src attribute on img tag.

The following will always return absolute (filesystem) paths

Storage::disk('public')->path($destination_image->img);

//Or

public_path('storage/'.$destination_image->img);

To get the relative path you can

$link = Storage::disk('public')->url($destination_image->img);

Laravel Docs - Filesystem - File Urls

Or use the asset helper to get the fully qualified url

$link = asset('storage/' . trim($destination_image->img, '/'));

Laravel Docs - Helpers - asset

Or use the url helper to get the fully qualified url

$link = url('storage/' . trim($destination_image->img, '/'));

Laravel Docs - Helpers - url

For your particular use case you can define an accessor on the DestinationImage model like

class DestinationImage extends Model
{
    protected $appends = ['src'];

    public function getSrcAttribute()
    {
        return Storage::disk('public')->url($this->img);
    }

    //rest of the model code
}

Then in the controller you can eager load the relation

public function show($id)
{
    $destination = Destination::with('destination_images')->findOrFail($id);

    return response()->json($destination);

    //Or since Eloquent models are Jsonable
    //return $destination;
}

And you can access the src attribute on the destination_images records in the front end.