Add support for image path value in <SimpleList leftAvatar>

[fzaninotto]

Problem

By default, SimpleList expect avatar values to be initials. When passing a avatar URL, the avatar shows the end of the URL instead of the image.

const UserList = (props) => (
    <List {...props}>
        <SimpleList
            primaryText={record => record.name}
            secondaryText={record => record.role}
            leftAvatar={record => record.avatar}
        />
    </List>
);

To set an image as avatar in SimpleList, developers must return an <img> element. This isn't super intuitive.

const UserList = (props) => (
    <List {...props}>
        <SimpleList
            primaryText={record => record.name}
            secondaryText={record => record.role}
-           leftAvatar={record => record.avatar}
+           leftAvatar={record => <img alt="" src={record.avatar} />}
        />
    </List>
);

Note: user records look like:

    [
        {
            id: 1,
            name: 'Logan Schowalter',
            role: 'admin',
            avatar: 'https://marmelab.com/posters/avatar-1.jpeg',
        },
        {
            id: 2,
            name: 'Breanna Gibson',
            role: 'user',
            avatar: 'https://marmelab.com/posters/avatar-2.jpeg',
        },
        {
            id: 3,
            name: 'Annamarie Mayer',
            role: 'user',
            avatar: 'https://marmelab.com/posters/avatar-3.jpeg',
        },
    ],

Solution

Avatar accepts both text (displays initials) or image paths (displays image)

[djhi]

What about base64 images ?