Javascript 基于类创建内联图像

我目前正在为Hitbox.tv创建用户脚本/扩展；mod的基本思想是用Twitch.tv上的图像替换某些单词，这一点我已经做到了。现在我需要帮助的是找到一种最简单的方法，根据某些人的信息或姓名创建徽章符号。例如，如果一个名为“GamingTom”的用户发送一条消息，则在其姓名的左侧会显示一个小符号

我已经研究了一些方法，但是什么都没用。我认为可能有效的两种选择是：

<li ng-repeat="message in messages" class="from_GamingTom user buffer_" compile="message.html" ng-class="{isOwner:message.isOwner, isMod:message.isMod}">

我对javascript相当陌生，因此非常感谢您的帮助。如果这些都没有意义，就说吧，我会尽量让自己说得更清楚。非常感谢

编辑：

---

只是想让你知道，我不能在任何情况下编辑HTML。我没有访问源文件的权限，所以我唯一能做的就是在扩展中使用某种javascript，如果这样做有意义的话。此外，显示在用户旁边的图像将仅针对特定用户，比如捐赠者，并且将仅为设置图像；不是他们的化身或其他什么。我提供的代码是在检查了html之后直接从网站上获得的，我选择了这两组代码，因为它们要么都有用户用户名，所以我认为它们最容易用于此目的。我希望这个编辑能帮上更多的忙

虽然您没有提供太多的代码可供使用，但我会尝试扩展您的第一行代码。看起来您正试图使用Angular来完成此任务。因此，要做到这一点，您可以在

li

中添加一个

img

标记

<li ng-repeat="message in messages" class="from_GamingTom user buffer_" compile="message.html" ng-class="{isOwner:message.isOwner, isMod:message.isMod}">
<img ng-src="{message.pic}"/>
</li>

---

然后，只需使用css对

img

和

li

进行样式设置，即可获得所需的外观。

如果

messages

数组中的每个项都有发送消息的人的信息，那么这将是最容易做到的

您还需要设置一个函数来获取与特定用户关联的图像。（我假设这是用户的化身）。现在让我们假设您有一个函数，该函数使用特定的用户名，并返回该用户的图像的URL。让我们称之为

getImageForUser（）

然后你会这样做：

<ul>
  <li ng-repeat="message in messages">
    <img ng-src="{{ getImageForUser(message.user) }}" />
    <span>{{ message.text }}</span>
  </li>
</ul>

$scope.getImageForUser = function(username) {
  // query your database or some other way of getting avatar
  return avatar_url;
}

然后您需要在

ng repeat

中使用父范围，如下所示：

<ul>
  <li ng-repeat="message in messages">
    <img ng-src="{{ $parent.getImageForUser(message.user) }}" />
    <span>{{ message.text }}</span>
  </li>
</ul>

{{message.text}

看起来您使用的是angular而不是jquery。我决定尝试使用vanilla javascript，因为据我所知，将jquery与Greasemonkey用户脚本一起使用有点困难。ng click、ng class和ng repeat都是angular定义的属性。虽然我不熟悉香草js。但是，假设您尝试使用ng类和ng click，您可能需要寻找一种角度解决方案来实现这一点。您提供的两个选项中的任何一个都不清楚如何显示内联图像。你能提供一个更完整的例子来说明你的尝试吗？

<ul>
  <li ng-repeat="message in messages">
    <img ng-src="{{ $parent.getImageForUser(message.user) }}" />
    <span>{{ message.text }}</span>
  </li>
</ul>