Question

我在显示来自在线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

Answer 1

将这样的图像绑定到您的* ngFor

<td><img [src]="i.data.image1" alt="image"></td>

，然后在您的界面中将“数据”类型设置为任意

Answer 2

正如Ved_Code_it所说，对i.data.image1的bindind [src]有效：

<td><img [src]="i.data.image1"></td>

说明

通过[src]，我们可以看到：

html标签 image 具有名为 src 的属性。
由方括号 [] 包裹：这是Angular的一种单向绑定。意思就是每当分配给[src]的值更改时，img元素的src属性也会更改。（如果您通过javascript更改了i.data.image1的值，则您的图像将会更改）

在这里，我给新的角度编程器留下一些建议：

在Car界面中，您定义了data: string;，但您真正希望的是一个对象，因此您应该将其更改为 "data": { "name": string, "description": string, "image1": string }。这是打字稿类型定义，可帮助程序员不要犯错误，但最终，当它转换为javascript时，此代码将消失。
检查属性 data 是否存在并且具有 image1 会很方便。

Answer 3

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'
},

Angular-从json对象获取属性并将其显示为图像

3 个答案:

说明