заменить изображения ссылками из внешнего текстового файла

Question

У меня есть функция, которую я использую для замены аватаров игроков на пользовательские изображения. Пока что у меня есть 3 из них, и я встроил статические ссылки для замены в расширение Chrome. Вместо этого я хотел бы, чтобы функция смотрела на внешний текстовый файл для создания массива, чтобы я мог добавлять новые проигрыватели без необходимости каждый раз переиздавать расширение. Я могу просто добавить новые пары ссылок в текстовый файл.

Внешний файл 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 dataString = `{
  "/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",
  "/imgs/avatar/generated/15_140_118_1168_1519_574_306_982_181_125.png": "https://cbsargecom.ipage.com/imgs/ZXGinstead.png",
  "/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"
}` // the data in backticks is what the file looks like

const data = JSON.parse(dataString); // this is what getJSON does for you

$('a.avatarContainer img').each(function() {
  var src = $(this).attr("src"), replace = data[src];
  if (replace) $(this).attr("src", replace);
});

<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>

И это больше похоже на ваш оригинальный код, но я не уверен, что это то, что вы действительно хотели

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>