Ionic how to image from data of array

Question

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][2]][2]

rtpHarry · Accepted Answer · 2019-07-14 03:16:46Z

1

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.

answered Jul 14, 2019 at 3:16

rtpHarry

13.2k4 gold badges45 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Umaiz Khan Over a year ago

Thanks for your answer. But its not working when i put x.attachments[0].url its showing error of ERROR TypeError: Cannot read property 'url' of undefined And if i put ? then its not showing error also not showing actual image. And its showing image of a cross camera image

rtpHarry Over a year ago

Can you post a proper full, text version, of the data you are trying to parse? What is the art in let x of art. The [] notation is right so you are not passing that structure in and I cannot answer any further without knowing the exact structure of what data is being passed around.

Umaiz Khan Over a year ago

Very Sorry this is server side restriction. Thanks for your answer

Collectives™ on Stack Overflow

Ionic how to image from data of array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related