[英]Background Image doesn't appear in a <span> element
我正在嘗試在嵌入在列表項中的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
試試這個:希望這會起作用
<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>
不好意思 我想念帶你。 我認為React也像組件文件一樣處理圖像的相對路徑。 顯然不是。 我必須提供相對於SERVER服務靜態文件的Public
目錄的路徑。 我的錯。 抱歉。
您可以嘗試以下添加背景圖片的版本
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})`
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.