react资源指向_react bundle.js相对路径

react资源指向

在react中，静态资源引用，使用相对路径，相对路径以src为根，引用动态资源是，使用绝对路径。绝对路径以public为根。jsx的前景图片根目录都指向public，jsx里面行间样式链接图片资源指向了public。

所以在jsx中，图片资源不是放在public目录下，而是放在public的其他同级目录下时，不管你用多少个../，都不能跳出根目录再去选择到public目录，同样，这时你即使把转换成行间样式的背景图片依旧是不可以的，根路径依旧还是指向public。

在这种情况下的话，引入的思路就是把相对路径转换成绝对路径。把相对路径转换成绝对路径的思想就是把资源内嵌到网页当中，这样可以用import或者用.default来转化。

图片是可以作为模块化资源被引入。模块化的图片会被转成base64的格式。

用<img src={require('../../assets/img/zan.png').default} alt=""/>
或者先引入图片，用import zan from '../../assets/img/zan.png，然后在需要调用的位置使用 <img src={zan} alt=""/>调用