Question

例如，这里是一个链接： http://www.kalliany.at/SPG/getWassersport_withID.php?id=1 如果您继续使用它，可以找到以下内容：

{"id":"1","sportart":"Paddeln","disziplin":"Kanu","kurzbez":"Einer-Kajak","bild":"large\/Kanu_01_large.jpg","beschreibung":"Die \u00d6sterreicherin (geborene Deutsche) Yvonne Schuring im \"Flachwasser\"-Kajak"}

本节： “ bild”：“大/Kanu_01_large.jpg” 是一张图片，我正在尝试将其显示在我的网站上

这些是我的模型和界面

export class WassersportdetailRaw {
    id: string;
    sportart: string;
    disziplin: string;
    kurzbez: string;
    bild: string;
    beschreibung: string;
}



import { WassersportdetailRaw } from "./wassersportdetail.interface";

export class Wassersportdetail implements WassersportdetailRaw{

    constructor(
        public id: string,
        public sportart: string,
        public disziplin: string,
        public kurzbez: string,
        public bild: string,
        public beschreibung: string
      ) {}
}

这是我得到的服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';
import { WassersportdetailRaw } from './wassersportdetail.interface';
import { Wassersportdetail } from './wassersportdetail.model';

@Injectable({
  providedIn: 'root'
})
export class DataServiceService {
  api2 ='http://www.kalliany.at/SPG/getWassersport_withID.php?id=';

  constructor(private http: HttpClient) { }

 getWassersportDetail(id): Observable<Wassersportdetail> {
  return this.http
    .get<WassersportdetailRaw>(`${this.api2}`+id)
    .pipe(map(raws => this.provideWassersportDetailFrom(raws)));
 }

provideWassersportDetailFrom(raws: WassersportdetailRaw): Wassersportdetail {
  return new Wassersportdetail(
    raws.id,
    raws.sportart,
    raws.disziplin,
    raws.kurzbez,
    raws.bild,
    raws.beschreibung
  );
}
}

这是我的html

<br>
<h1 align=center>Wassersportdetail</h1> 

<ul>  
    <button routerLink="/form0" class="btn btn-primary" id = "oben" >Zurück zur  Startseite!</button> 
    <br><br>
    <table class="table table-striped">
        <tr>
          <td>ID</td>
          <td>Sportart</td>
          <td>Disziplin</td>
          <td>Kurz Bezeichnung</td>
          <td>Bild</td>
          <td>beschreibung</td>
        </tr>
        <tr>
          <td>{{ sport.id }}</td>
          <td>{{ sport.sportart }}</td>
          <td>{{ sport.disziplin }}</td>
          <td>{{ sport.kurzbez }}</td>
          <td>{{ sport.bild }}</td>
          <td>{{ sport.beschreibung }}</td>
        </tr>
      </table>
      <img src="{{sport.bild}}" >
</ul>

但是该部件无法正常工作，如何获取图像？

这只是一个学校项目，所以我没有认真对待所有事情，不要介意做得不好的事情^^

Answer 1

在bild字段中设置的相对路径将与浏览器中的活动主机连接。因此，我认为实际图像在后端。从后端获取绝对路径，例如静态文件夹路径或从后端生成的url。然后，将字符串与绝对板条和bild字段连接起来

角度我无法从服务器获取图像

1 个答案: