我不知道如何从数据库中的url链接获取图像

Question

我有一个Spring Boot Rest API作为后端，用户类具有多个字段，例如id，username，email，profile_picture（字符串是http://localhost:8082/static.images/user/default.jpg之类的字符串）等等。

在我的前端设备中，我有一个表，该表遍历了从数据库调用的用户列表，其中包括个人资料图片，但由于它只是一个链接，因此我不知道如何将图像放入html。

这是我春季的用户类别：

    package com.example.demo.domain;

    import com.example.demo.contract.EditUserProfileRequest;
    import com.example.demo.validator.ValidEmail;
    import com.fasterxml.jackson.annotation.JsonIgnore;
    import com.fasterxml.jackson.annotation.JsonSetter;
    import lombok.AllArgsConstructor;
    import lombok.Builder;
    import lombok.Data;
    import lombok.NoArgsConstructor;
    import org.springframework.security.core.GrantedAuthority;
    import org.springframework.security.core.authority.SimpleGrantedAuthority;
    import org.springframework.security.core.userdetails.UserDetails;
    import org.springframework.web.servlet.support.ServletUriComponentsBuilder;

    import javax.persistence.*;
    import javax.validation.constraints.NotEmpty;
    import java.util.ArrayList;
    import java.util.Collection;
    import java.util.Date;
    import java.util.List;

    import static java.util.stream.Collectors.toList;

    @Entity
    @Table(name="users")
    @Data
    @Builder
    @NoArgsConstructor
    @AllArgsConstructor
    public class User implements UserDetails {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    @Column(name = "user_id")
    Long id;

    @NotEmpty
    @Column(name="username")
    private String username;

    @Column(name="firstname")
    private String firstName;

    @Column(name="lastname")
    private String lastName;


    @NotEmpty
    @Column(name="password")
    private String password;

    @ValidEmail
    @Column(name = "email")
    @NotEmpty()
    private String email;

    private boolean isEnabled;

    @Column(name="photoProfile")
    private String photoProfile;

    @Column(name="registered_date", nullable=false)
    @Temporal(TemporalType.DATE)
    private Date registeredDate;


    @ElementCollection(fetch = FetchType.EAGER)
    @Builder.Default
    private List<String> roles = new ArrayList<>();


    @Override
    public Collection<? extends GrantedAuthority> getAuthorities() {
        return this.roles.stream().map(SimpleGrantedAuthority::new).collect(toList());
    }
    @JsonIgnore
    @Override
    public String getPassword() {
        return this.password;
    }
    @JsonSetter
    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String getUsername() {
        return this.username;
    }
    @JsonIgnore
    @Override
    public boolean isAccountNonExpired() {
        return true;
    }
    @JsonIgnore
    @Override
    public boolean isAccountNonLocked() {
        return true;
    }
    @JsonIgnore
    @Override
    public boolean isCredentialsNonExpired() {
        return true;
    }

    @Override
    public boolean isEnabled() {
        return true;
    }


    public void setDefault() {
        this.registeredDate = new Date();
        this.photoProfile = ServletUriComponentsBuilder.fromCurrentContextPath().path("/static.images/user/default.jpg").toUriString();
    }

    public void setEditedProfile(EditUserProfileRequest input) {
        if(input.getFirstName()!=null) {
            this.firstName = input.getFirstName();
        }
        if(input.getLastName()!=null) {
            this.lastName = input.getLastName();
        }
        if(input.getEmail()!=null) {
            this.email = input.getEmail();
        }


    }
    }

这是我的html：

    <div class="container-scroller">
    <app-navbar></app-navbar>
    <div class="container-fluid page-body-wrapper">
    <app-sidebar></app-sidebar>
    <div class="main-panel">
      <div class="content-wrapper">
        <div class="row">
    <div class="col-lg-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title" style="font-weight: 600">Users List</h4>
        <div class="table-responsive">
          <table class="table table-hover">
            <thead>
              <tr>
                <th>Id</th>
                <th>Profile Picture</th>
                <th>Username</th>
                <th>Last Name</th>
                <th>First Name</th>
                <th>Email</th>
                <th>Enabled</th>
                <th>Registered Date</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let u of users" (click)="onClick(u)" id="myId">
                <td>{{u.id}}</td>
                <td>{{u.profilePicture}}</td>
                <td>{{u.username}}</td>
                <td>{{u.lastName}}</td>
                <td>{{u.firstName}}</td>
                <td>{{u.email}}</td>
                <ng-container *ngIf="u.enabled; else elseTemplate">
                  <td class="text-success">{{u.enabled}}</td>
                </ng-container>
                <ng-template #elseTemplate>
                  <td class="text-danger">{{u.enabled}}</td>
                </ng-template>
                <td>{{ u.registeredDate | date: shortDate }}</td>
              </tr>
            </tbody>
          </table>
         </div>
       </div>
      </div>
     </div>
     </div>
      </div>
    </div>
    </div>
   </div>