背景图像未出现在 <span> 元素中

【问题标题】：Background Image doesn't appear in a <span> element背景图像未出现在 <span> 元素中
【发布时间】：2019-02-26 16:25:26
【问题描述】：

我试图在嵌入列表项的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

【问题讨论】：

可能路径错误，使用控制台调试。为什么不改用表情符号？
它与 jsx 文件本身位于同一文件夹中。图片名称是复制粘贴
旁注，
中的
是无效的html。

@Stickers 你是对的，路径是错误的。

标签： html css reactjs styles

【解决方案1】：

您可以尝试以下版本的添加背景图片

    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})`

【讨论】：

【解决方案2】：

对不起。我想念带领你。我认为 React 也处理图像的相对路径，就像它处理组件文件一样。显然不是。我必须提供相对于服务器提供静态文件的Public 目录的路径。我的错。对不起。

【讨论】：

【解决方案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>

【讨论】：

我认为它找不到图像。触发 àlt`属性文本
去他妈的！走错路了！ React 不关心相对路径。我必须提供服务器提供的静态文件目录的路径。