errorImage and defaultImage do not work for local assets.

[cjackson234]

On error, I would like to display an image from the local assets directory. '../../assets/default.png'.

However, when I do this it errors out looking for the image and the path given is at the root of the hard drive.

GET file:///C:/assets/default.png net::ERR_FILE_NOT_FOUND

Is there any way to get it to pull local assets?

[tjoskar]

Hi @cjackson234,
Local assets should work fine out of the box (we do not do any url check, we just pass it to the Img-constructor).
How do you start your application? Do you use any dev server or are you just open your html file in the browser without any server?

[cjackson234]

It's an electron app. So it's just opening an html app without a deployed server.

[tjoskar]

Does it work if you place a 'normal' img-tag next to the lazy loaded image, something like:

<img src="../../assets/default.png"> <!-- Does this work? -->
<img [lazyLoad]="'../../assets/default.png'"> <!-- This does not work for you, right? -->

[cjackson234]

Correct. It is working for a regular image src, but not lazy load.

[tjoskar]

This is super weird since we only set src to whatever value we get:

ng-lazyload-image/src/lazyload-image.ts

Line 74 in 67326f0

element.src = imagePath;

These two lines should act the same:

<img src="../../assets/default.png">
<img [lazyLoad]="'../../assets/default.png'" defaultImage="../../assets/default.png">

What does src have for value, if you take a look in the dev tools? Is it the same for the regular img tag as for the lazyloaded one?

[cjackson234]

/E:/assets/default.png:1 GET file:///E:/assets/default.png net::ERR_FILE_NOT_FOUND

E:/ is the SSD root.

[cjackson234]

Found a fix:
In my component I added:
private defaultImage = require('../../assets/default.png');

Then in the HTML you add
<img errorImage='{{defaultImage}}' defaultImage="{{defaultImage}}">

and it loads just fine.

[tjoskar]

I guess it has to do with how electron is loading relative resources.

Glad it worked for you. I'm closing this now, let me know if you want to repoen it.

[cjackson234]

It's not electron, it's webpack. When it sees a relative path it knows how to replaces it when it compiles. However, we're setting it dynamically in this case. So by the time the code compiles, the path in question no longer exists.

I would probably add a quick note in your documentation about that.

Edit: Thank you btw.

[tjoskar]

I guess it depends on the setup in that case. When I have been developing for electron I have not used webpack.

Never the less; I agree, we should add some small note in the readme.