react background-image引用

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

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

1.  
   1.html里要用require引入
2.  
   let pageBg = require('public/userbg.jpg')
3.  
    
4.  
   <div style={{ backgroundImage: `url(${pageBg}` }}></div>
5.  
    
6.  
   2.html里要用require引入
7.  
   <div style={{backgroundImage:`url(${require('public/menuIcon/WorkOrder.png')})`}}></div>
8.  
    
9.  
   3.css中 注意 这里要使用css文件所在的相对路径
10.  
    .WorkOrderIcon
11.  
    {
12.  
    background-image:url('../../../public/menuIcon/WorkOrderActive.png') !important;
13.  
    }
14.  
     

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

1.  
   let name = 'WorkOrder'
2.  
    
3.  
   <div style={{backgroundImage:"url(" require("public/menuIcon/" name ".png") ")"}}></div>

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

这篇好文章是转载于：学新通技术网