1

Does file-loader ignore dynamic url?

// app.component.html
<img src="../assets/flower.jpeg" alt="Flower" width="100px">
<img src="{{assets}}flower.jpeg" alt="Flower" width="100px">

// app.component.ts
export class AppComponent {
  assets = '../assets/';
}

As you can see I have 2 images in html. The first image is displayed as expected, but the second one does not work.

The first image is generated and image url in html is also changed, whereas second image url is not hashed.

//eg:
<img src="./assets/b16683a9edb6ebf57d144f8b86cb163e.jpeg" alt="Flower" width="100px">
<img src="../assets/flower.jpeg" alt="Flower" width="100px">

Here is the git repo to reproduce issue, Run npm i && npm start

luiscla27
  • 4,956
  • 37
  • 49
Sameer
  • 4,758
  • 3
  • 20
  • 41

4 Answers4

3

In your particular case - yes, your path is simply ignored as an incorrect one. However, if your change it to ./{{assets}}flower.jpeg (just for example) you'll get an error

ERROR in Cannot find module './{{assets}}flower.jpeg'

Why is that happen? {{assets}} is an Angular binding and the exact value will be known only during the application run not during the building process. So the only way this path can be handled during the building process is just like it is and consequently, file-loaded cannot find any file on this incorrect path and gives you an error.

I hope I've explained the issue pretty clear. However, feel free to ask more questions in the comments if some details are not clear for you.

Sergey Mell
  • 7,780
  • 1
  • 26
  • 50
  • So I think there is no use of `file-loader` in my case, I should use `copy-webpack-plugin` to simply copy my assets to output directory and reference that path. Also there is no chance of hashing assets path/name ? – Sameer Feb 14 '21 at 09:27
  • There are some options to add hashes to file name, however, (as far as I know) there is no way, in this case, to pass this hash into your code so the application would know the new filename – Sergey Mell Feb 14 '21 at 10:23
0

You need to bind like this

<img src='{{ "assets/images/" + wonder.id + ".jpg" }}' />

[] is not compatible with {{ }}.

Joundill
  • 6,828
  • 12
  • 36
  • 50
vi calderon
  • 196
  • 1
  • 8
0

I made this example and it works The fisrt is an html with the code html The second is the .ts I wrote a variable in the ts called path where I put the url of my image then I use binding in the property src in the html and I send the variable path. So when I click the button called 'change' the image change dynamically

vi calderon
  • 196
  • 1
  • 8
0

Do like this, <img [src]="assets+'flower.jpeg'" alt="Flower" width="100px"> Change path to asset as follows assets = 'assets/';

Rajantha Fernando
  • 308
  • 4
  • 12
  • Have you change the path to asset folder too? – Rajantha Fernando Feb 10 '21 at 11:38
  • Yes! I changed path, Actually I am hashing image name with file loader. This works If I give path in `src` itself, But when I use same path as dynamic, It didn't work. I think `file-loader` just ignores it, Because `file-loader` neither generated image in `assets` with hash nor changed path in image `src` – Sameer Feb 10 '21 at 11:43