Как вместо рандомного показа текста, сделать рандомный показ картинок?
 

Код выводит рандомно названия стран в виде текста: UK, US, RU, а как сделать, чтобы этот же код вместо текста выводил картинки, например http://сайт.ру/uk_flag.png и т.д.

Пробовал вставлять <img src=""> выдает ошибку.

var countryRand;
        var countries = ['UK', 'US', 'RU'];

        countryRand = rand(0,3);

domains.push({
            country:countries[countryRand],
           })

' + this.country + '

var countries = ["GB", "US", "RU"].map(v => v.replace(/[a-z]/gi, match => String.fromCodePoint(match.toLowerCase().codePointAt() + 127365)));

var country = countries[Math.random() * countries.length | 0];
alert(country);

Или можно сразу объявить..

var countries = ["🇬🇧", "🇺🇸", "🇷🇺"];

Malleys,
1. если не секрет, что происходит в строке 1 пост #2?
2. как это связано с выводом картинки?

рони, не секрет... в Юникоде есть алфавит, точно такой же, как английский, но его буквы являются региональными индикаторами... Когда две такие буквы встречаются рядом, и они означают страну, то они образуют флаг https://en.m.wikipedia.org/wiki/Regi...dicator_Symbol

2. Вы можете использовать шрифт... вот пример c Noto Color Emoji https://codepen.io/Malleys/pen/xBpWLw?editors=0100

Malleys,
спасибо за ответ.

Malleys, этот код выдает просто всплывающее окно с текстами: GB, US, RU, а не флаги.

Все правильно, это флаги, проверьте кодовые точки. Если вы видите флаги как чёрно-белый текст, то значит вы используете шрифт Segoe UI Emoji в котором так прорисованы региональные индикаторы! Вы можете явно указать какой-нибудь шрифт с хорошо прорисованными символами...

Вот пример с подключённым шрифтом...

<p id="flag"></p>
<button onclick="showRandomFlag()">Показать следующий случайный флаг</button>
<style>
@font-face {
	font-family: "Noto Color Emoji";
	src: url("https://cors-anywhere.herokuapp.com/https://github.com/googlei18n/noto-emoji/raw/master/fonts/NotoColorEmoji.ttf");
}

html {
	font: 300% "Apple Color Emoji", "Android Emoji", "Twemoji Mozilla", "Noto Color Emoji";
}
</style>
<script>
function showRandomFlag() {
    var countries = ["GB", "US", "RU"].map(v => v.replace(/[a-z]/gi, match => 
    String.fromCodePoint(match.toLowerCase().codePointAt() + 127365)));

    var country = countries[Math.random() * countries.length | 0];
    document.getElementById("flag").textContent = country;

}
showRandomFlag();
</script>

Если вы хотите использовать шрифт из примера, то скачайте его к себе... https://github.com/googlei18n/noto-e...ColorEmoji.ttf

Malleys, Не получается применить ваш вариант к коду который у меня имеется. Все же хотелось бы попроще, просто прописать картинки (флаги) которые бы выводились рандомно. Проще говоря мне бы понять, как вот это:

<img src="">

Сунуть вот сюда, вместо UK, US, RU

var countryRand;
        var countries = ['UK', 'US', 'RU'];

        countryRand = rand(0,3);

Почему это такая проблема для вас?

Если у вас нет клавиатуры с эмодзи (может стоит перейти на современную ОС) то вы можете скопировать флаги, например, из этой статьи в Wikipedia https://en.m.wikipedia.org/wiki/Regi...dicator_Symbol

Не стоит использовать в данном случае элемент <img>, он предназначен для изображении, а не для текста. Текст не следует запихивать в картинки, такое невозможно искать!

Здесь нет ничего необычного. 1) Подключаете к сайту шрифт 2) Используете необходимые символы

Посмотрите ещё раз пост №7, на всякий случай, вот ещё раз шрифт с флагами https://github.com/googlei18n/noto-e...ColorEmoji.ttf

UPD Я не знаю, что вы хотите сделать, но даже если скопировать флаги из уикипедии, всё получается... https://codepen.io/Malleys/pen/pXzPvP?editors=1100

UPD2 Lefseq, большое вам спасибо, что спросили такое, благодаря вам, я нашёл цветной шрифт с флагами BabelStone Flags, в котором прорисованы качественно флаги, и он небольшого размера! Однозначно 💯 👍 👍 И в нём даже поддерживаются флаги из ISO 3166-2 🚀

Malleys,
почему ссылка на шрифт работает только через сторонний сервер, строка 6 пост #7?