在與webpack的反應中包含並引用圖像

Question

在單頁JavaScript應用程序構建中包含和引用圖像以反應用法的最佳方式，並與webpack捆綁在一起？

到目前爲止，我已經

return (<img src={require('./pic.png'}</div>) 

有沒有更好的辦法？

Answer 1

如果您使用的是Webpack的url-loader，您可以告訴它自動嵌入數據uri，如果文件大小低於指定的限制。

require("url?limit=10000!./pic.png"); 
// => DataUrl if "pic.png" is smaller that 10kb