Разные картинки на одинаковых src

Question

Есть url, по которому я всегда получаю разную картинку. Например https://thispersondoesnotexist.com/image. Я хочу вывести на странице несколько картинок по этой ссылке, чтобы все они были разными, но они видимо кешируются браузером и в итоге я вижу одинаковые картинки:

img {
  width: 100px;
}

<img src="https://thispersondoesnotexist.com/image" />
<img src="https://thispersondoesnotexist.com/image" />

Также пробовал поставить get-параметр:

img {
  width: 100px;
}

<img src="https://thispersondoesnotexist.com/image?v=1" />
<img src="https://thispersondoesnotexist.com/image?v=2" />

...но как вы видите, результат тот же - картинки одинаковые. Какие есть варианты решения проблемы? (домен, по которому я получаю картинки ≠ мой домен).

Answer 1

Опытным путем было выяснено, что сам сайт https://thispersondoesnotexist.com/ генерирует новую картинку примерно раз в 2 секунды (откройте ссылку одновременно в 2х разных браузерах, чтобы убедиться). Вот небольшая демонстрация.

Если мы будем слишком часто обращаться к этой ссылке, то картинки будут одинаковые (осторожно, трафик):

let i = 0;
const int = setInterval(() => {
    const img = document.createElement("img");
    img.src = `https://thispersondoesnotexist.com/image?v=${i}`;
    document.body.appendChild(img);

    i++;
    i > 50 && clearInterval(int);
}, 100);

img {width:50px}

Но если обращаться к этой ссылке раз в 2 секунды, то картинки почти всегда будут разные:

let i = 0;
const int = setInterval(() => {
    const img = document.createElement("img");
    img.src = `https://thispersondoesnotexist.com/image?v=${i}`;
    document.body.appendChild(img);

    i++;
    i > 50 && clearInterval(int);
}, 2000);

img {width:50px}

Прошу прощения у всех, кого заставил поломать голову. Главное, что теперь мы знаем, в чем было дело и когда-нибудь этот опыт нам пригодится :)

БЛОГ НА HUSL

Разные картинки на одинаковых src

Ответы (1 шт):