Aurelia + Webpack and Image issue

1

Hi all,
I have created an app using npx makes aurelia cli. Now, in my-app.html I have a following markup :

<img src="../images/img_avatar2.png">

The image is not showing and giving 404 (not found) error. Any ideas, how to resolve it?

2

depending on where the images are located you’d have to configure your webpack settings most likely to copy the images to the output directory

3

images are in directory same level as src folder.

Even I tried to copy the directory manually to dist folder but same issue.

4

next thing to check would be what the baseurl is and adjust the image path accordingly. most likely your …/ is wrong given the relative baseurl

5

I have checked all possibilities before I posted here. Thanks for your help.

It would be best if there is a step-by-step guide to it, instead of going back and forth.

For example, like when you do npx makes aurelia with typescript and webpack as an option, you have to do following step for images to work.

6

I think it has to do with the aurelia loader for html files rather than the html-loader

7

Yes, the best way currently is to import an image from a ts file and bind img.src to the import. This way webpack will bundle the image.

Another option is to put files into “public” folder for dev and root folder for prod.

8

How to do that please.
Any guidance on that part. Any sample project which handle this. Thanks and happy new year

9

This should suffice (for prod, follow [1])

  1. create a /public dir in the root
  2. Put eg. public/images/test.png in there
  3. The image loaded with the following markup

  • <img src="../images/test.png">, or <img src="images/test.png">

    in my-app.html

[1] Aurelia + Webpack and Image issue - #12 by MaximBalaganskiy

2 Likes
10

@WisdomCorp please read through the issue, there is an example

3 Likes
11

Your solution worked. Thanks. This should be documented.

Also whats the process of Public/images directory requirement? Is it from Aurelia side or webpack, to have better understanding.

Also when I do

npm run build env:prod

and upload website, its again does not display the image. In this case what I have do to rectify it.

12

Public folder works only for webpack dev server. You need to copy files into your prod root folder.

2 Likes
13

Thanks, also you can view the path which expected, so can create same structure.