werein/react

What is the best method fo loading static resources?

dbhandel opened this issue · 6 comments

dbhandel commented

Hi,
I'm trying to load a logo.png file. I created a directory /public/images. I have attempted to use github: tcoopman/image-webpack-loader although I may have misused this or it may not be the correct loader.

Do you have any guidance on how to load images using your boilerplate?

Thanks

jirikolarik commented

Hey,

sure thing.

You can use https://github.com/webpack/file-loader and loader to web pack config

{ test: /\.(png|jpg|svg)$/, loader: 'file?name=/[name]-[hash].[ext]' }
jirikolarik commented

Give me second, I'll prepare you a demo

dbhandel commented

Thanks Jiri. Your instructions are crystal clear but I get this error:

Module parse failed: /Users/davidhandel/code/idr/src/public/images/logo.png Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./src/components/LoggedInHeader.js 31:12-48

I have a png file loaded in logo.png. I have placed your loader in my webpack.development.js. All I see is a broken image in the browser.

jirikolarik commented

It says that you need a loader which I forgot to save in packages.json

npm i file-loader --save

dbhandel commented

For whatever reason, the loader code didn't work for me in Webpack config but when I used it in the component like this:
const logo = require('file?name=/images/[name]-[hash].[ext]!../public/images/logo.png');

I could successfully render the logo with an img tag with src={logo} ,

Many thanks.