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

雾秋
  • 1.4k

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的理解有问题?

回复
阅读 959
1 个回答

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

  • public下的文件是静态文件,不会经过webpack打包,相当于一个外链资源
  • require的文件,会被url-loader处理,有个limit字段(可自行修改),如果图片大小小于limit,会被转为base64
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏