Aurelia Webpack Image not loading

Question

I have a strange problem where I can see an image if I hard code it but if I try and use the aurelia binding functions it will not work.

html template

<template>
...
<img src="${imageURL}" />
<img src="../images/image1.jpg" />
...
</template>

This renders as

<html>
...
<img class="au-target" au-target-id="7" src="../images/image1.jpg"> (not working)
<img src="/a6c7e3f2e070b21f54eeb86ac5b0eb08.jpg"> (working)
...
</hmtl>

The Hardcoded img works but has been magically changed to a random filename, but my Dynamic bound img does not work because it has not been changed like the static one has. What do I need to do to get the dynamic bound image to use the correct modified source?

What do you think is happening behind the scenes ? why is that static image name is changed? and do you see browser trying to load ../images/image1.jpg? — Alexander Taran
I assume there is a process on build where webpack runs that bundles the resources it detects that I am using and that is what modifies my static image sources. The browser shows the failed attempt at loading the dynamic link because of course image1 does not exist in the build. What I don’t know how to do is force webpack to include those images and reference those images dynamically at run time. I can import the image in my .ts just like my sass file but I can’t find any doco on how to reference it when binding. — John Petrak

Fred Kleuver Fred Kleuver · Accepted Answer · 2018-04-07T05:29:00

Webpack statically analyzes file references and replaces them with bundle references as you can see.

You either need to have some place in your source code where you do have a hard reference to the filename, and then bind to that instead:

some-file-with-all-image-paths.ts

export const paths = {
    image1: '../images/image1.jpg'
};

Webpack will analyze and replace it just the same, and your binding will get the replaced name. Either way - somewhere in your code you need a direct reference to the file so you can let webpack include it in the bundle.

Alternatively, if you must have your images references dynamically (parameterized or loaded from external source etc) or if for some other reason it's not working, you could use copy-webpack-plugin and simply copy all your images to the output folder.

They'll physically be there outside of the bundle, and you can reference them in any way you like. Fairly harmless for few and small images, but not something you want when there are many of them..

Aurelia Webpack Image not loading

1 Answers