No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    avatar chat
    1
    2
    547
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      monoc44 last edited by

      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>
      
      1 Reply Last reply Reply Quote 0
      • M
        monoc44 last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • First post
          Last post