Empty “URL” does not load SPFx web-part

Question

I am creating SPFx web-part in which I am using office fabric to bind SharePoint image link (hyperlink column).

Web-part works fine if all values present. If hyperlink column is blank web-part does not load at all.

it throw error:

Uncaught TypeError: Cannot read property 'Url' of null

<div >
    {
        this.state.items.map((items,key)=>{    
            return(
                <DocumentCard styles={cardStyles} onClick={() =>
                    this.Showitem(items.Template)}>
                    <DocumentCardImage height={150} imageFit={ImageFit.cover} imageSrc={items.ImageLink["Url"]} />
                    <DocumentCardDetails>
                        DocumentCardTitle title={items.GPDTemplate} />
                    </DocumentCardDetails>
                </DocumentCard>
            );
    })}
</div>

Answer 1

Try using below line in your code:

<DocumentCardImage height={150} imageFit={ImageFit.cover} imageSrc={items.ImageLink ? items.ImageLink["Url"] : ''} />