[英]Background Image doesn't appear in a <span> element
I am trying to display a smiley icon in a span
tag which is embedded in an list item. 我正在尝试在嵌入在列表项中的
span
标签中显示一个笑脸图标。 Here is the code: 这是代码:
<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>
This is what i get 这就是我得到的
and this is smile.png
这是
smile.png
Try This : Hope This Will Work 试试这个:希望这会起作用
<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>
Sorry All. 不好意思 I miss led you.
我想念带你。 I thought that the React processes relative paths to images too, as it does for component files.
我认为React也像组件文件一样处理图像的相对路径。 It obviously doesn't.
显然不是。 I had to give path relative to the
Public
directory where the SERVER serves static files. 我必须提供相对于SERVER服务静态文件的
Public
目录的路径。 My mistake. 我的错。 Sorry.
抱歉。
You can try below versions of adding background image 您可以尝试以下添加背景图片的版本
Import smileImage from “./smile.png”;
<span
style={{
padding: "25px",
display: "inline-block",
backgroundImage: "url(" + smileImage + ")",
height: "17px",
width: "50px"
}}
>
{"ss"}
</span>
You can also use ES6 string templates as below to achieve the same effect: 您还可以使用以下ES6字符串模板来达到相同的效果:
backgroundImage: `url(${smileImage})`
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.