Einfügen und Referenzieren eines Bildes in Reaktion mit Webpack

Question

Was ist der beste Weg, um Bilder für die react-Verwendung in eine JavaScript-App mit nur einer Seite einzubinden und zu referenzieren, die mit Webpack erstellt und gebündelt wurde?

Bisher habe ich

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

Gibt es einen besseren Weg?

Answer 1

Wenn Sie Webpacks url-loader verwenden, können Sie festlegen, dass ein Daten-URI automatisch eingebettet wird, wenn die Dateigröße unter einem bestimmten Grenzwert liegt.

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