0

What should I type in <img> 'src' attribute to make html-loader replace it with URL? Assume folder 'public' is served via webpack-dev-server, project layout looks like

- src
  - index.js 
- img
  - dog.jpg
  - cat.jpg
- public
  - index.html

webpack.config.js has rules for url-loader and html-loader:

{ test: /\.(png|jpg)$/, loader: 'file-loader' },
{ test: /\.(html)$/, loader: 'html-loader'},

index.js imports images:

import './../img/cat.jpg'
import './../img/dog.jpg'

And index.html has <script> for index.bundle.js. I expect <img src="dog.jpg"> to be processed, but this doesn't happen. Where am I wrong? Thanks.

vatosarmat
  • 1,090
  • 10
  • 22
  • The question is answered here. It should be closed now. https://stackoverflow.com/questions/47126503/how-to-load-images-through-webpack-when-using-htmlwebpackplugin – vatosarmat Apr 11 '19 at 12:02

1 Answers1

0

By default every local is required (require('./image.png')). You may need to specify loaders for images in your configuration. I would highly recommend you to use file-loader or url-loader in this scenario in place of html-loader. Infact on html-loader's github documentation only suggest this.

Gaurav Singh
  • 176
  • 1
  • 4