Difference in parsing of props with or without src attribute

[corstian]

With the following code:

<Avatar
    username="Corstian Boerman"
    inline size="30"
    class="mr-3"
    src="https://pbs.twimg.com/profile_images/940157009151721472/nVMbmnJf_400x400.jpg" />
Corstian Boerman
<br />
<br />
<Avatar
    username="Corstian Boerman"
    inline
    size="30"
    class="mr-3" />
Corstian Boerman

The result is quite different:

The layout of the last one is how I actually expect the avatar to render.

Looking at the styles applied to the element it seems that after the background image is set no other styles are being applied:

1st element:

<div
    class="vue-avatar--wrapper mr-3"
    style="
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: transparent url(&quot;https://pbs.twimg.com/profile_images/940157009151721472/nVMbmnJf_400x400.jpg&quot;) no-repeat scroll 0% 0% / 30px 30px content-box border-box;
    ">
    <!---->
</div>

2nd element:

<div
    class="vue-avatar--wrapper mr-3"
    style="
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: rgb(158, 158, 158);
        font: 12px/301px Helvetica, Arial, sans-serif;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: rgb(238, 238, 238);
    ">
    <span>CB</span>
</div>

[saintplay]

I can see why there is a inconsistency in the layout. But answering your question, using the src prop, the username prop is ignored

[corstian]

Yeah, but given that the username prop is mandatory I can't do much without it.

Do you have some time to fix the inconsistency, or point me in general direction so I can fix it myself?

Edit: Does not look too difficult. I'll try to fix it when I have some spare time again.

[saintplay]

v2.1.6 should fix this inconsistency, username prop is not longer required to use an image