我在显示来自在线api上的json的图像时遇到问题。 对我不好的棱角技巧表示抱歉,我是2周前才开始的。 我正在尝试从json文件中的“数据”对象访问“ image1”属性。
我尝试使用阅读器从url读取,并且效果很好,但是从api检索-特别是json的对象“ data”和属性“ image1”似乎是一个问题。也许问题是我的方法是错误的,仅将src设置为“数据”对象,我需要将其设置为data [“ image1”],我尝试将其设置为[src]="data["image1"]
,但没有成功。>
我的JSON
[
{
"id": 1,
"type": "car",
"name": "Porsche 911",
"description": "driving machine",
"area_id": null,
"data": {
"name": "JSON Name",
"description": "JSON Description",
"image1": "https://unsplash.com/photos/u6BPMXgURuI"
}
}
]
我的界面Car
export interface Car {
id: string;
type: string;
name: string;
description: string;
area_id: string;
data: string;
}
我的组件html
<tr *ngFor="let i of cars | async">
<td>{{i.id | json}}</td>
<td>{{i.type | json}}</td>
<td>{{i.name | json}}</td>
<td>{{i.description | json}}</td>
<td>{{i.area_id | json}}</td>
<td><img [src]="i.data | json" alt="image"></td>
</tr>
我的组件ts文件
export class CarComponent implements OnInit {
cars: Observable<Car[]>;
constructor(private http: HttpClient) {}
ngOnInit() {
this.cars = this.http.get<Car[]>('https://car-garage-
beta.herokuapp.com/api/cars/porsche');
}
}
在我的界面如果我设置“数据”类型为字符串或对象我得到同样的错误
net::ERR_UNKNOWN_URL_SCHEME
答案 0 :(得分:0)
将这样的图像绑定到您的* ngFor
<td><img [src]="i.data.image1" alt="image"></td>
,然后在您的界面中将“数据”类型设置为任意
答案 1 :(得分:0)
正如Ved_Code_it所说,对i.data.image1的bindind [src]有效:
<td><img [src]="i.data.image1"></td>
通过[src]
,我们可以看到:
在这里,我给新的角度编程器留下一些建议:
data: string;
,但您真正希望的是一个对象,因此您应该将其更改为
"data": {
"name": string,
"description": string,
"image1": string
}
。这是打字稿类型定义,可帮助程序员不要犯错误,但最终,当它转换为javascript时,此代码将消失。答案 2 :(得分:0)
app.component.html
<div *ngIf="item.icon" class="img">
<img [src]="item.icon">
</div>
我的 JSON:
{
id: 'App',
title: 'App',
type: 'item',
icon: '.assets/img/sidebar/app.svg'
},