React中img的src属性用相对路径和require有什么区别？

Question

以Create-react-app为例

1. 当设置<img src = {require('../public/logo.png')} alt=""></img>时，审查元素可以看到是将图片转换成base64，然后再作为src给图片。
2. 当设置<img src = {'/logo.png'} alt=""></img>时，审查元素可以看到是直接访问url/logo.png的图片。

打包出来的文件大小都相同，但是require中logo如果是变量，还可能导致Cannot find module导致白屏。

那么什么时候用require？什么时候用方式2？

个人理解require的优势在于图片文件可以放在模块下，就能直接引用。而方式二必须放到public文件下。

有没有办法让图片放在模块下就能直接用方式二使用？ 或者说我对require的理解有问题？

Answer 1

什么时候用其实看你自己了，我一般放public

• public下的文件是静态文件，不会经过webpack打包，相当于一个外链资源
• require的文件，会被url-loader处理，有个limit字段（可自行修改），如果图片大小小于limit,会被转为base64。