Sunday, September 20, 2020
therichposts@gmail.com
Angular 8Laravel 6

How to get image from laravel and show in angular?

Angular 9 Laravel 7 Auth Login working tutorial Part 2

Hello to all, welcome to therichpost.com. In this post, I will tell you, How to get image from laravel and show in angular?

This is the first part of How to upload image with Laravel Angular?

Post Working

In this post, I am getting image from laravel backend and with angular httpclient, I am showing that image in my angular 8 application. For laravel setup, I have used xampp.

Here are the working steps and please follow carefully:

1. Very first, you need to run common below commands to add Angular 8 project on your machine:

$ npm install -g @angular/cli

$ ng new angularlaraveluploadimage //Install fresh Angular setup

$ cd angularlaraveluploadimage //go inside angular fresh setup

2. Now you need to add the below code into your src\app\app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Now you need to add below code into your Angular 8 src\app\app.component.ts file:

import { Component } from '@angular/core';
import { HttpClient} from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  data:any;
  constructor(private http: HttpClient) {
  
    this.http.get('http://localhost/blog/public/api/sample-restful-apis').subscribe(data => {
        this.data = data;
        console.log(this.data);
        }, error => console.error(error));
    }
        
      
}

4. Now you need to add into your Angular 8 app.component.html file:

<img src="{{data}}">

Laravel Code

1. Here is the code for your laravel 6 routes/api.php file:

Route::get('/sample-restful-apis','HomeController@getData');

2. Now you need to all below code into app\Http\Controllers\HomeController.php file:

public function getData()
    {
         $imgsrc = "https://secure.gravatar.com/avatar/d09eaad01aea86c51b4f892b4f8abf6f?s=100&d=wavatar&r=g";
        return response()->json($imgsrc);
    }

This is it and if you have any query regarding this post then please do comment below.

Jassa

Thank you

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

2 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.