Require('../xx/xx')
在脚手架中的静态文件在运行后的位置是会发生改变的,并且命名也会不同,所以直接写上路径可能会找不到相应的文件,所以我们应该使用require()来获取资源路径。
该方法最终是返回一个url的字符串,所以像src属性可以直接用它赋值,而在css这种使用 url('xx/xx/xxx') 时,外面的url是是必须带上的,而里面的路径需要使用require()来获取。
1. 对于img的src属性而言:
src={require('xxx/xxx/xx')}
2. 对于css中的background-image而言:
<div style={{
backgroundImage:`url(${require('xx/xxx/xxx')})`
}}
>
</div>
或者写成:
<div style={{
backgroundImage:'url(' + require('xx/xxx/xxx') + ')',
}}
>
</div>