Question

我正在尝试为Eve Online论坛制作时尚插件的自定义样式。我试图调整头像图片的大小，因为它太小了，不适合我。然而，它使用的是低质量的图像，并且在调整大小时看起来太粗糙，所以我试图找出如何通过替换部分文本或替换网址（更容易）来使用更大的图像。在图像中，唯一的区别是显示大小的文本。

请参阅：

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

所以基本上45（原始）需要用90代替，以便看起来不那么颗粒感。

发布的网址：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。

＆＃13;

.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;
}

＆＃13;

Answer 2

无法以您描述的方式使用CSS更改html内容。我建议使用Javascript更改src标记的<img>。做点什么

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

Answer 3

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

很难说tampermonkey只有几行js出了什么问题。是否可以显示完整的文件？或者在jsfiddle上发布一个例子？

您可以在Chrome Inspector中自行调试此类问题，方法是在代码中输入“debugger”并打开Chrome Inspector中的“源”标签（Chrome中的F12按钮）。检查员将在该行停止，您可以看到不同变量的值。例如：

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

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

浏览器将在调试器行上停止。在控制台中输入“imagelist”，然后按Enter键查看其当前值。它可能是空的，在这种情况下，getElementsByClassName不会检索任何内容。出于几个不同的原因可能会发生这种情况。或者imagelist数组可能会填充，但replace（）没有按预期工作。您是否有可能找出发生的情况并在此报告？

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

用CSS替换文本/图像URL

3 个答案: