将 Text/Image URL 替换为 CSS

Question

我正在尝试为用于 Eve Online 论坛的时尚插件制作自定义样式。我正在尝试调整头像图像的大小，因为它对我来说太小了。然而，它使用的是低质量图像，并且在调整大小时看起来太粗糙，所以我试图通过替换部分文本或替换 url（更容易的）来弄清楚如何使用更大的图像。图片中，唯一不同的是一段显示尺寸的文字。

参见：

meta.eveonline.com/erika_mizune/45/2168_1.png meta.eveonline.com/erika_mizune/90/2168_1.png

所以基本上 45（原始）需要用 90 替换，以减少颗粒感。

URL 到 Post：https://meta.eveonline.com/t/avatar-size-category-adjustment/9032

时尚插件：https://userstyles.org/styles/144974/avatar-category-adjustment

我调整图片大小的代码是这样的：

 .topic-avatar img.avatar
  {
    height: 75px;
    width: 75px;
    border-radius: 0;
  }

  .topic-avatar
  {
    width: 75px !important;
  }

我在发帖前尝试进行搜索，但没有找到适合我需要的内容。

谢谢！

编辑 1：我尝试按照建议切换到 tampermonkey 以使用 JS，但没有用。原代码如下：

    <div class="topic-avatar">
        <a class="trigger-user-card main-avatar" href="/u/Erika_Mizune"
            data-user-card="Erika_Mizune"> <img alt="" width="45" height="45"
            src="https://cdn-enterprise.discourse.org/eveonline/user_avatar/meta.eveonline.com/erika_mizune/45/2168_1.png"
            title="Erika_Mizune" class="avatar"></a>
        <div class="poster-avatar-extra"></div>
    </div>

我在 tampermonkey 中的脚本：

    var imagelist = document.getElementsByClassName("avatar");
    imagelist.foreach(function(element) {
        element.src = element.src.replace("/45/", "/90/");
    });

编辑 2：尝试在控制台中使用调试后，我收到 .foreach 不是函数的错误，并尝试尝试以下操作：

尝试 1：

var imagelist = document.getElementsByTagName("img");
        imagelist.foreach(function(element) {
            element.src = element.src.replace("/45/", "/90/");
        });

尝试 2：

var imagelist = Array.from(document.getElementsByClassName('avatar'));
imagelist.foreach(function(element) {
    element.src = element.src.replace("/45/", "/90/");
});

尝试 3：

   var imagelist = Array.from(document.getElementsByTagName('img'));
imagelist.foreach(function(element) {
    element.src = element.src.replace("/45/", "/90/");
});

所有这些尝试都在控制台中返回了相同的错误，即 .foreach 不是函数。

Answer 1

试试这个？将 background: url(meta.eveonline.com/erika_mizune/90/2168_1.png) no-repeat !important; 添加到您的 img CSS.

.topic-avatar img.avatar {
  height: 75px;
  width: 75px;
  border-radius: 0;
  background: url(meta.eveonline.com/erika_mizune/90/2168_1.png) no-repeat !important;
}

.topic-avatar {
  width: 75px !important;
}

Answer 2

无法按照您描述的方式将 html 内容更改为 CSS。我建议使用 Javascript 来更改 <img> 标签的 src。做类似

的事情

var imagelist = document.getElementsByClassName("forum_image_class");
imagelist.foreach(function(element){
    element.src = element.src.replace("/45/", "/90/");
}

Answer 3

我认为 javascript 解决方案是正确的方法。

tampermonkey的几行js真的不好说。是否可以显示完整的文件？或者 post 关于 jsfiddle 的例子之类的？

在 Chrome Inspector 中自己调试此类问题很容易，只需在代码中键入 "debugger" 并在 Chrome Inspector 中打开“源代码”选项卡（[= 中的 F12 按钮） 25=]).检查器将停在该行，您可以看到不同变量的值。例如：

首先，在 Chrome 浏览器中打开 Chrome Inspector。然后用调试器行加载页面：

var imagelist = document.getElementsByClassName("forum_image_class");
debugger;
imagelist.foreach(function(element){
    element.src = element.src.replace("/45/", "/90/");
}

浏览器将在调试器行停止。在控制台中键入 'imagelist' 并按回车键查看其当前值。它可能为空，在这种情况下 getElementsByClassName 不会检索任何内容。这可能由于几个不同的原因而发生。或者图像列表数组可能会填充但 replace() 未按预期工作。您是否可以找出发生的情况并在此处报告？

另外：小心使用 .replace()。你必须用反斜杠转义某些字符，你应该知道那些特殊字符是什么。在这种情况下，您可能需要也可能不需要转义正斜杠。

将 Text/Image URL 替换为 CSS

Replace Text/Image URL with CSS

javascript

css

tampermonkey