react 中 background-image引用

世界上总有很多不理解的人和事，比如background-image的引入 

静态的路径 js里用require引入，从根目录下的话

1.html里要用require引入
let pageBg = require('public/userbg.jpg')

<div  style={{ backgroundImage: `url(${pageBg}` }}></div>

2.html里要用require引入
<div style={{backgroundImage:`url(${require('public/menuIcon/WorkOrder.png')})`}}></div>

3.css中 注意 这里要使用css文件所在的相对路径
.WorkOrderIcon
  {
     background-image:url('../../../public/menuIcon/WorkOrderActive.png') !important;
  }

如果路径是拼凑起来的字符串，存在变量的话

 let name = 'WorkOrder'

<div style={{backgroundImage:"url("+require("public/menuIcon/"+name+".png")+")"}}></div>

注意对比以下两种方式等价