Open Closed

Consuming the profile pictures in custom list #7010

User avatar
0
n.uerkmez created
  • ABP Framework version: v8.1.0.rc3
  • UI Type: Angular
  • Database System: EF Core (SQL Server, Oracle, MySQL, PostgreSQL, etc..)
  • Tiered (for MVC) or Auth Server Separated (for Angular): yes
  • Exception message and full stack trace:
  • Steps to reproduce the issue: Hi, I want to consume the profile pictures that are already uploaded via the profile page, for a list that is in the angular custom component. How can I consume this profile picture from the backend ( separated authserver) and angular frontend?

Thanks

Go to accepted answer
19 Answer(s)
  • User Avatar
    0
    salih created
    Support Team .NET Developer

    Hi, Can you use {AuthServerUrl}/api/account/profile-picture-file/{userId} with url. Example usage: <img src="https://account.abp.io/api/account/profile-picture-file/d488264a-c732-95c6-eccc-3a04e5515a1f"

  • User Avatar
    0
    sinan created
    Support Team Angular Developer

    Hi, in angular you can use ProfilePictureService which is imported from @volo/abp.commercial.ng.ui.

    Example usage;

    import { ProfilePictureService } from '@volo/abp.commercial.ng.ui/config';

export class YourComponent {
  protected readonly profilePictureService = inject(ProfilePictureService);
  userId = '997';
  
  ngOnInit(): void {
    this.profilePictureService.getProfilePicture(this.userId).subscribe(res => {
      console.log(res);
    });
  }
}
  • User Avatar
    0
    n.uerkmez created

    Great, Thanks

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    I'm closing this, free open if not sovled.

  • User Avatar
    0
    n.uerkmez created

    import { ProfilePictureService } from '@volo/abp.commercial.ng.ui/config';

    export class YourComponent { protected readonly profilePictureService = inject(ProfilePictureService); userId = '997'; response;

    ngOnInit(): void { this.profilePictureService.getProfilePicture(this.userId).subscribe(res => { this.response = response; }); } }

    Can you provide html template as well ?The following example is correct or?

    <img [src]= "this.response.fileContent">

  • User Avatar
    0
    n.uerkmez created

    I have found a way. You can close this ticket. Thanks

    1
  • User Avatar
    0
    n.uerkmez created

    I have following issue in azure static web app. Auth server is a separated server.

    host-app/api/account/profile-picture/3a56f8d5-bf2b-ba87-433d-3a1130099bff 404 (Not Found)
    host-app/api/account/user-delegation/my-delegated-users 404 (Not Found)

    Some pages are not working properly on Angular side. However, in Auth server I can reach out this page.

    It could be a bug, all application is working properly, except account navigation. These endpoints exist in the auth server. But, the Angular app sends requests to the host API for the account module.

    Any suggestion?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    You can try this:

    AuthServerUrl/api/account/profile-picture/3a56f8d5-bf2b-ba87-433d-3a1130099bff

    We have released the 8.1 stable version, could you upgrade your project and try again

  • User Avatar
    0
    n.uerkmez created

    I have already updated to v.8.10, but I still have this problem. It works fine on localhost. But, after deploying azure, unfortunately only the account module of the application is not consuming resources in the right base URL (Auth server). It consumes Host api url instead for account module.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    unfortunately only the account module of the application is not consuming resources in the right base URL (Auth server). It consumes Host api url instead for account module.

    This may be a configuration issue, can you check your config file?

  • User Avatar
    0
    n.uerkmez created

    Do you have any chance to test it in an environment that is different from localhost with a separate auth server? What configuration do you need to understand the issue? I can share with you privately

    I have checked. It is configured as expected. The strange thing is that part of it doesn't work. Login, and logout work properly. User management is working as well. But the profile picture request was redirected to the host API not the auth server.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    But the profile picture request was redirected to the host API not the auth server.

    Could you share the code?

  • User Avatar
    0
    n.uerkmez created

    Hi,

    But the profile picture request was redirected to the host API not the auth server.

    Could you share the code?

    Sorry, what code? Do you mean Angular environment configuration? If so, can I send it to you privately?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Yes please, and the your profile picture related code. shiwei.liang@volosfot.com

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi.

    You need to configure the AbpAccountPublic service, for example:

  • User Avatar
    0
    n.uerkmez created

    Could you provide me with more details regarding how to configure it?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Just like this:

  • User Avatar
    0
    n.uerkmez created

    Thanks I will do do it

  • User Avatar
    0
    n.uerkmez created

    That worked. Thanks for your help. You can close ticket

Assignee
No one
Labels
ui-angular
Made with ❤️ on ABP v9.1.0-preview. Updated on December 13, 2024, 06:09