CODEWITHSUNDEEP
ionic4
Umaiz Khan
Umaiz Khan

Reputation: 1227

Ionic how to image from data of array

I need to show the image from array. And the array is already in array.

Example like this

{
title:xyz
attachments: [
{
image:'xyz.com'
}]}

im showing like this but image is not showing just title is showing 

    <ion-card *ngFor="let x of art">
        <img  [src]="x.attachments.url || '/assets/shapes.svg'" class="image"/>
        <div style="text-align: right;">{{x.title}}</div>

    </ion-card>

but its not showing image Its showing unexpeted image of cross camera

enter image description here [![enter image description here][2]][2]

Upvotes: 0

Views: 908

Answers (1)

rtpHarry
rtpHarry

Reputation: 13125

That [ on the attachments line indicates that its an array of objects.

You need to access [0] like this:

<ion-card *ngFor="let x of art">
    <img  [src]="x.attachments[0].url || '/assets/shapes.svg'" class="image"/>
    <div style="text-align: right;">{{x.title}}</div>
</ion-card>

I think to be safe you should also put a ? in there but this is just off the top of my head, I haven't double-checked it:

<ion-card *ngFor="let x of art">
    <img  [src]="x.attachments[0]?.url || '/assets/shapes.svg'" class="image"/>
    <div style="text-align: right;">{{x.title}}</div>
</ion-card>

Basically, if I got the syntax right then it won't show an error if there are no attachments in that Art item.

It's called the "Angular Safe Navigation Operator" if you want to research it more.

Upvotes: 1

Related Questions