При открытии проекта вижу знаки вопроса

Создаю проект на платформе React. При открытии проекта вижу знаки вопроса, а не то, что хотелось. Узнал, что возможно нужно установить библиотеку lucid-react, но не имею понятия как это внедрить в код.

import React from "react";
import './App.css';

const App = () => {
    return (
        <div style={{ padding: '2rem', fontFamily: 'Arial' }}>
            <h1>Футбольний клуб "Кривбас"</h1>

            <img
                src="https://upload.wikimedia.org/wikipedia/uk/0/02/FC_Kryvbas_Kryvyi_Rih_logo_2022.png"
                alt="Емблема Кривбасу"
                width={150}
                style={{ marginBottom: '1rem' }}
            />

            <p><strong>Країна:</strong> Україна</p>
            <p><strong>Місто:</strong> Кривий Ріг</p>

            <h2>Досягнення</h2>
            <ul>
                <li>Чемпіон України серед команд першої ліги: 1971, 1975, 1976, 1981</li>
                <li>Бронзові призери Вищої ліги України: 1999, 2000</li>
            </ul>

            <h2>Найвідоміші гравці</h2>
            <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
                <div>
                    <img
                        src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Sergiy_Kuznetsov.jpg/400px-Sergiy_Kuznetsov.jpg"
                        alt="Сергій Кузнєцов"
                        width={150}
                    />
                    <p>Сергій Кузнєцов</p>
                </div>
                <div>
                    <img
                        src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Vitaliy_Kolesnyk.jpg/400px-Vitaliy_Kolesnyk.jpg"
                        alt="Віталій Колесник"
                        width={150}
                    />
                    <p>Віталій Колесник</p>
                </div>
            </div>

            <h2>Додаткова інформація</h2>
            <p>
                <a
                    href="https://uk.wikipedia.org/wiki/Кривбас_(футбольний_клуб)"
                    target="_blank"
                    rel="noreferrer"
                >
                    Вікіпедія: Кривбас
                </a>
            </p>

            <h2>Соціальні мережі</h2>
            <ul>
                <li>
                    <a href="https://www.facebook.com/fckryvbas/" target="_blank" rel="noreferrer">
                        Facebook
                    </a>
                </li>
                <li>
                    <a href="https://www.instagram.com/fckryvbas/" target="_blank" rel="noreferrer">
                        Instagram
                    </a>
                </li>
                <li>
                    <a href="https://twitter.com/FCKryvbas" target="_blank" rel="noreferrer">
                        Twitter
                    </a>
                </li>
            </ul>
        </div>
    );
};

export default App;

А при открытии вижу это, фото прилагается.

фото


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

Автор решения: Roman C

Нужно сменить кодировку страницы. Просто откройте страницу, например, в любом редакторе и измените кодировку на UTF-8.

→ Ссылка