Fix avatar display on read-only contacts and use global Avatar component

[skjnldsv]

Before	After

[call-me-matt]

Looks very nice!
Unfortunately I cannot change the avatar anymore:

console error

Error: 
    r dist.js:1
    r dist.js:1
    o dist.js:1
    t dist.js:1
    n dist.js:1
    onreadystatechange dist.js:1
    e dist.js:1
    e dist.js:1
    l dist.js:1
    _invoke dist.js:1
    v dist.js:1
    me dist.js:1
    i dist.js:1
    de dist.js:1
    de dist.js:1
    value dist.js:1
    e dist.js:1
    l dist.js:1
    _invoke dist.js:1
    v dist.js:1
    me dist.js:1
    i dist.js:1
    de dist.js:1
    de dist.js:1
    value dist.js:1
    e dist.js:1
    l dist.js:1
    _invoke dist.js:1
    v dist.js:1
    ke dist.js:1
    i dist.js:1
    Se dist.js:1
    Se dist.js:1
    value dist.js:1
    n contacts.js:349
    l dist.js:1
    _invoke dist.js:1
    v dist.js:1
    Yn contacts-main.js:1586
    i contacts-main.js:1586
    Gn contacts-main.js:1586
    Gn contacts-main.js:1586
    updateContact contacts.js:325
    f vuex.esm.js:847
    dispatch vuex.esm.js:512
    dispatch vuex.esm.js:402
    setPhoto ContactDetailsAvatar.vue:342
    e ContactDetailsAvatar.vue:255
    l dist.js:1
    _invoke dist.js:1
    v dist.js:1
    T contacts-main.js:600
    i contacts-main.js:600
    E contacts-main.js:600
    E contacts-main.js:600
    onloadend ContactDetailsAvatar.vue:223
    processFile ContactDetailsAvatar.vue:223
    VueJS 3
contacts.js:353:12
    n contacts.js:353
    l dist.js:1
    _invoke dist.js:1
    v dist.js:1
    Yn contacts-main.js:1586
    a contacts-main.js:1586
    (Async: promise callback)
    Yn contacts-main.js:1586
    i contacts-main.js:1586
    Gn contacts-main.js:1586
    Gn contacts-main.js:1586
    updateContact contacts.js:325
    f vuex.esm.js:847
    dispatch vuex.esm.js:512
    dispatch vuex.esm.js:402
    setPhoto ContactDetailsAvatar.vue:342
    e ContactDetailsAvatar.vue:255
    l dist.js:1
    _invoke dist.js:1
    v dist.js:1
    T contacts-main.js:600
    i contacts-main.js:600
    E contacts-main.js:600
    E contacts-main.js:600
    onloadend ContactDetailsAvatar.vue:223
    (Async: EventHandlerNonNull)
    processFile ContactDetailsAvatar.vue:223
    VueJS 3
        Ye
        n
        _wrapper

EDIT: I can change the avatar, but it's not displayed.

[skjnldsv]

Done :)

[call-me-matt]

Almost perfect. Only in the list view of the person I share my contacts with, the avatars are either not shown or blanked out. In the details-header, the avatar is shown correctly. No error logs beside The following contact has been repaired: invalid REV

[skjnldsv]

Only in the list view of the person I share my contacts with, the avatars are either not shown or blanked out.

So as UserA, you share an addressbook with UserB and UserB cannot see avatars in the list?
Can you inspect the html of the Avatar in the list and copy/paste it here?

[call-me-matt]

So as UserA, you share an addressbook with UserB and UserB cannot see avatars in the list?

Unfortunately yes.

Can you inspect the html of the Avatar in the list and copy/paste it here?

1. At first loading, all avatars (in the list) are letters:
   

2. once clicked Mr. Test turns white
   

3. while Mr Hello remains a letter.
   

(if I remove the dot an rename Mr. Test to Mr Test, he behaves just like Mr Hello)

[skjnldsv]

Fixed @call-me-matt ! :)

[call-me-matt]

Wonderful.
APPROVED.