Allow avatar in 'q-chat-message’ to be an icon



  • A simple version could be something like:

    <q-chat-message
       name="me"
       size=“6"
    -> avatar-icon="ion-person"
       :sent=“msg.sent"
       :text=“‘msg.content”                         
       :stamp=“msg.postedTime” />
    

    A more elaborated one (allowing the use of icon’s properties):

    <q-chat-message
       name="me"
       size=“6"
       :sent=“msg.sent"
       :text=“‘msg.content”                         
       :stamp=“msg.postedTime”>
      <q-icon name=“ion-person” :color=“color(msg)” />
    </q-chat-message>
    


  • Found my answer in the doc:

    Due to how Webpack works in creating the bundle for your App, in some cases you may need to use QItemTile, like for avatars or images. The reason is simple: if you use QItemSide avatar property, you must supply the path to the statics folder and cannot use the assets folder or relative paths. Instead, the latter two can be used with a QItemTile wrapping an <img> HTML tag. Look closely at image paths in the example above (statics/guy-avatar.png vs ~assets/boy-avatar.png). Also read about App Handling Static Assets to understand how Webpack includes assets into the bundle.