Add profile image to the mention list

[FrazeColder]

Since the PR #341 it is not possible to add a profile image to the list like in #164. We need to create blots.

Can anyone please help me out how to implement this with Vue/Nuxt3 and give me a working example?

[csculley]

You should still be able to use renderItem in almost the same way

So instead of

        renderItem(item) {
          return `<img src="${item.profileImageUrl}">${item.value}`;
        },

you can just do

        renderItem(item) {
          const imgNode = document.createElement("img");
          imgNode.src = item.profileImageUrl;
          imgNode.innerText = item.value;
          return imgNode;
        },

The index page on the docs should have an example of using renderItem that you can reference and view on https://quill-mention.com. I'm not sure about the best way to integrate it into Vue/Nuxt3 off the top of my head, sorry

[FrazeColder]

Thanks man!