CODEWITHSUNDEEP
webpackaurelia
John Petrak
John Petrak

Reputation: 2928

Aurelia Webpack Image not loading

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?

Upvotes: 0

Views: 546

Answers (1)

Fred Kleuver
Fred Kleuver

Reputation: 8047

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..

Upvotes: 2

Related Questions