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.

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>

Hello.

I would love to find a Quasar component which allows to:

• truncate some content put into a container (div, p, span) if the size of the content goes over the container’s size or a predefined number of lines
• display a button that shows the whole content (’show content’) or less (‘show less’)
• define some sort of decreased opacity as soon as the reader gets closed to the truncated line

If I am not mistaken, Collapsable allows to display either the full content or nothing.

Of course, one might argue that it is easily doable through some JS and CSS tricks but I think it is a fairly common pattern used nowadays on websites and would deserve maybe a Quasar component.

What do you think?