用来自外部txt文件的链接替换图像

Question

我具有用来用自定义图片替换玩家头像的功能。到目前为止，我有3个，并且已将静态替换链接构建到Chrome扩展程序中。我想做的是让该函数查看外部txt文件以构建数组，这样我就可以添加新播放器，而不必每次都重新发布扩展名。我可以将新的链接对添加到文本文件。

外部replacer.txt文件为：

{
  "replaced": [
    {
      "original": "/imgs/avatar/generated/26_1114_1115_836_937_952_856_1100_904_875_863_922_840_503.png",
      "newone": "https://cbsargecom.ipage.com/imgs/FJinstead.png"
    },
    {
      "original": "/imgs/avatar/generated/15_140_118_1168_1519_574_306_982_181_125.png",
      "newone": "https://cbsargecom.ipage.com/imgs/ZXGinstead.png"
    },
    {
      "original": "/imgs/avatar/generated/26_1114_1452_1115_2092_925_1102_847_914_1126_967_1125_871_2082_2080.png",
      "newone": "https://cbsargecom.ipage.com/imgs/skelinstead.png"
    }
  ]
} 

我的Chrome扩展程序的一部分功能是：

$.getJSON('https://cbsargecom.ipage.com/imgs/replacer.txt', function (data) {
        $.each(data, function () {
            $('a.avatarContainer img').each(function(){
                $(this).attr('src', $(this).attr('src').replace(data.replaced.original[0], data.replaced.newone[0]));
            });
        });
    });

这只会产生Uncaught TypeError：无法读取控制台中未定义的属性'0'。

起作用的功能是

    $('a.avatarContainer img').each(function(){
    $(this).attr('src', $(this).attr('src').replace("/imgs/avatar/generated/26_1114_1115_836_937_952_856_1100_904_875_863_922_840_503.png", "https://cbsargecom.ipage.com/imgs/FJinstead.png"));
    $(this).attr('src', $(this).attr('src').replace("/imgs/avatar/generated/15_140_118_1168_1519_574_306_982_181_125.png", "https://cbsargecom.ipage.com/imgs/ZXGinstead.png"));
    $(this).attr('src', $(this).attr('src').replace("/imgs/avatar/generated/26_1114_1452_1115_2092_925_1102_847_914_1126_967_1125_871_2082_2080.png", "https://cbsargecom.ipage.com/imgs/skelinstead.png"));
    });

Answer 1

您的索引放置在错误的位置

我想你想要这个吗？

const data = {
  "replaced": [{
      "original": "/imgs/avatar/generated/26_1114_1115_836_937_952_856_1100_904_875_863_922_840_503.png",
      "newone": "https://cbsargecom.ipage.com/imgs/FJinstead.png"
    },
    {
      "original": "/imgs/avatar/generated/15_140_118_1168_1519_574_306_982_181_125.png",
      "newone": "https://cbsargecom.ipage.com/imgs/ZXGinstead.png"
    },
    {
      "original": "/imgs/avatar/generated/26_1114_1452_1115_2092_925_1102_847_914_1126_967_1125_871_2082_2080.png",
      "newone": "https://cbsargecom.ipage.com/imgs/skelinstead.png"
    }
  ]
}

$.each(data, function() {
  $('a.avatarContainer img').each(function(i,img) {
    var $img = $(img);
    $img.attr('src', data.replaced[i].newone)
   // simpler than 
   // var src = $img.attr('src');
   // $img.attr('src', src.replace(data.replaced[i].original, data.replaced[i].newone));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="avatarContainer"><img src="/imgs/avatar/generated/26_1114_1115_836_937_952_856_1100_904_875_863_922_840_503.png" /></a>
<a class="avatarContainer"><img src="/imgs/avatar/generated/15_140_118_1168_1519_574_306_982_181_125.png" /></a>
<a class="avatarContainer"><img src="/imgs/avatar/generated/26_1114_1452_1115_2092_925_1102_847_914_1126_967_1125_871_2082_2080.png" /></a>