Скрыть сломанную картинку и показать ее альтернативный текст ReactJS

Question

Есть компонент, показывает список элементов из Json.

const Contact = ({avatar, first_name, last_name, email}) => {
    const initials = first_name.charAt(0)+""+last_name.charAt(0);

    return (
        <ListGroupItem className="item">
            <div>
                <Image src={avatar} alt={initials} className="avatar" />
            </div>
            <div className="info">
                <p>{first_name} {last_name}</p>
                <p>{email}</p>
            </div>
        </ListGroupItem>
    );
};

У некоторых из этих картинок путь равен null. Сейчас у меня выводятся битые картинки рядом с альтернативным текстом. Как можно скрыть битые изображения и показать только alt, который установлен на initials?

Answer 1

const Contact = ({avatar, first_name, last_name, email}) => {
    const initials = first_name.charAt(0)+""+last_name.charAt(0);

    return (
        <ListGroupItem className="item">
            <div>
                { 
                  null !== avatar 
                    ? <Image src={avatar} alt={initials} className="avatar" /> 
                    : initials 
                }
            </div>
            <div className="info">
                <p>{first_name} {last_name}</p>
                <p>{email}</p>
            </div>
        </ListGroupItem>
    );
};

Answer 2

Вы можете делать (Условный рендеринг):

{avatar ? <Image src={avatar} alt={initials} className="avatar" /> : initials}

БЛОГ НА HUSL

Скрыть сломанную картинку и показать ее альтернативный текст ReactJS

Ответы (2 шт):