Фоновое изображение не появляется в элементе <span>

Question

Я пытаюсь отобразить значок смайлика в теге span, который встроен в элемент списка.Вот код:

          <p>
            It consists of several tabs:{" "}
            <li>
              Home - Showcase and brief info about what this web site pretends
              to be{" "}
              <span
                style={{
                  padding: "25px",
                  display: "inline-block",
                  background: 'url("smile.png")',
                  height: "17px",
                  width: "50px"
                }}
              >
                {"ss"}
              </span>
            </li>
          </p>

Вот что я получаю

и это smile.png

Answer 1

Извини всех.Я скучаю по тебе.Я думал, что React также обрабатывает относительные пути к изображениям, как и для файлов компонентов.Это явно не так.Мне пришлось указать путь относительно каталога Public, в котором СЕРВЕР обслуживает статические файлы.Виноват.Сожалею.

Answer 2

Вы можете попробовать следующие версии добавления фонового изображения

    Import smileImage from “./smile.png”;
    <span
            style={{
              padding: "25px",
              display: "inline-block",
              backgroundImage: "url(" + smileImage + ")",
              height: "17px",
              width: "50px"
            }}
          >
            {"ss"}
          </span>

Вы также можете использовать шаблоны строк ES6, как показано ниже, для достижения того же эффекта:

    backgroundImage: `url(${smileImage})`

Answer 3

Попробуйте: Надеюсь, это сработает

 <p>
    It consists of several tabs:{" "}
    <li>
      Home - Showcase and brief info about what this web site pretends
      to be{" "}
      <span style="padding: 25px; display: inline-block; height: 17px; width: 50px;">
      <img src="smile.png"></img>
        {"ss"}
      </span>
    </li>
  </p>