Get the image from laravel database to angular frontend

Question

i have ecommerce project and i need to view the images of the products and i don't know how to get it with angular and i wish anyone can help me the store function in laravel

public function store(Request $request)
{
    $validator = Validator::make($request->all(), [
        'name' => 'required|string|max:100', 'display' => 'required|string|max:100', 'ram' => 'required|string|max:100', 'img' => 'required|image|mimes:jpg,png',
        'storage' => 'required|string|max:100', 'rear_cam' => 'required|string|max:200', 'front_cam' => 'required|string|max:200',
        'price' => 'required'
    ]);

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

    $img = $request->file('img');
    $ext = $img->getClientOriginalExtension();
    $img_name = 'product-' . uniqid() . ".$ext";
    $img->move(public_path('uploads/books/'), $img_name);

    $name = $request->name;
    $brand_id = $request->brand_id;
    $display = $request->display;
    $ram = $request->ram;
    $storage = $request->storage;
    $rear_cam = $request->rear_cam;
    $front_cam = $request->front_cam;
    $price = $request->price;
    $product = Product::create(['name' => $name, 'brand_id' => $brand_id, 'display' => $display, 'img' => $img_name, 'ram' => $ram, 'storage' => $storage, 'rear_cam' => $rear_cam, 'front_cam' => $front_cam, 'price' => $price]);

    $success = 'Product created successfully';

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

angular html

<td><img [src]="'./../../../../../../../xampp/htdocs/mobitech/public/uploads/books/' + product.img" class="w-100"></td>

Ali Alizadeh · Accepted Answer · 2021-08-30 03:30:22Z

1

Create a column in your database after storing your image get a static URL of it
save it to the database
pass it to your front end to use that static URL

answered Aug 30, 2021 at 3:30

Ali Alizadeh

682 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ABDERRAZZAQ LAANAOUI · Accepted Answer · 2021-08-29 14:51:23Z

0

You can use base64 representation, which is a group of binary-to-text encoding schemes that represent binary data in an ASCII string, this string can be stored directly to database as a normal string.

You can find here how to convert the image to base64 with Laravel Convert image to base 64 string with Laravel

And in angular, you need to just put that string to the in the src attribute of an img tag. if you are storing the result in a variable called img64 you can do this

<td><img [src]="img64" class="w-100"></td>

answered Aug 29, 2021 at 14:51

ABDERRAZZAQ LAANAOUI

1812 silver badges7 bronze badges

3 Comments

Osama Amr Over a year ago

and i don't need to store the name of the image?

ABDERRAZZAQ LAANAOUI Over a year ago

You mean a title like that you could put in the alt attribute ?

ABDERRAZZAQ LAANAOUI Over a year ago

If so, you can store it in a separate variable

Hadi Butt · Accepted Answer · 2021-08-29 15:20:19Z

0

To view an image in Laravel Blade you can simply use:

<td><img [src]="{{asset('uploads/books'.'/'.+ $product->img)}}" class="w-100"></td>

answered Aug 29, 2021 at 15:20

Hadi Butt

213 bronze badges

Collectives™ on Stack Overflow

Get the image from laravel database to angular frontend

3 Answers 3

Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Linked

Related