Search code examples
webpackaurelia

How to access an image when using Aurelia Webpack skeleton

I have a project that I started from Aurelia's skeleton-esnext-webpack starter project.

In the static folder, I added my own folder called images and added 3 or 4 .png files.

Now, in my views, I'm trying to access one of those images:

<img src="./static/images/blk_leaves.png">

I consistently get an error (both during webpack compilation and in the browser) about not being able to resolve that path.

I don't understand webpack configuration well enough to know what is happening, but I do see a line that seems to indicate its trying to do something with .png files: 

{ test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: {limit: 8192} }

It doesn't appear that webpack is copying the images into the dist folder (where everything else goes). What do I need to do to get this to work?

Thanks.

Solution

  • Use relative paths to load your images (and other assets for which you have registered loaders)

    for instance, in the starter project, if you were loading your image in src/app.html, you can try..

    <img src="../static/images/blk_leaves.png">