React中img的src属性用相对路径和require有什么区别？
以Create-react-app为例
- 当设置
<img src = {require('../public/logo.png')} alt=""></img>时，审查元素可以看到是将图片转换成base64，然后再作为src给图片。 - 当设置
<img src = {'/logo.png'} alt=""></img>时，审查元素可以看到是直接访问url/logo.png的图片。
打包出来的文件大小都相同，但是require中logo如果是变量，还可能导致Cannot find module导致白屏。
那么什么时候用require？什么时候用方式2？
个人理解require的优势在于图片文件可以放在模块下，就能直接引用。而方式二必须放到public文件下。
有没有办法让图片放在模块下就能直接用方式二使用？ 或者说我对require的理解有问题？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
什么时候用其实看你自己了，我一般放
publicpublic下的文件是静态文件，不会经过webpack打包，相当于一个外链资源require的文件，会被url-loader处理，有个limit字段（可自行修改），如果图片大小小于limit,会被转为base64。