CODEWITHSUNDEEP
angularlaravel
Osama Amr
Osama Amr

Reputation: 149

Get the image from laravel database to angular frontend

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>

Upvotes: 0

Views: 668

Answers (3)

Ali Alizadeh
Ali Alizadeh

Reputation: 68

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

Upvotes: 1

Hadi Butt
Hadi Butt

Reputation: 21

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

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

Upvotes: 0

ABDERRAZZAQ LAANAOUI
ABDERRAZZAQ LAANAOUI

Reputation: 181

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>

Upvotes: 0

Related Questions