Include and reference an image in react with webpack

Question

What ist the best way to include and reference images for react-usage in a singlepage JavaScript app build and bundled with webpack?

So far i have

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

Is there a better way?

Virelay

Depending on the situation, sometimes a spritesheet makes more sense. – Yawata

Answer 1

If you're using Webpack's url-loader you can tell it to automatically embed a data uri if the file size is under a specified limit.

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

Pocketful