Image Url in ts files

[Clemens-B]

First of all thank you for the great repo. I discovered some img url issues using this boilerplate. I hope you don't mind posting some tickets about that.

---

If you use image url in an angular component typescript file, the image is not included in the dist folder. E.g.:

@Component({...})
export class AppComponent {
  backgroundUrl = '../assets/bg.jpg';
}

I think similar to #8 we need a ts-loader.

[maximegris]

Hello,

You need to import your image if you want to import it in dist forlder.
Here Webpack load your image as a string (because it's only a string)

You need to require the file like this

backgroundUrl = require('../assets/bg.jpg');

 <img [src]="backgroundUrl">

[Clemens-B]

Works great, thanks!
But what if I need something like this background: #00ff00 url("smiley.gif") no-repeat fixed center in a component decorator?

@Component({
  animations: [
    trigger('State', [
      state('inactive', style({
        //tried this but wont work
        background: 'url(' + this.url + ') 0 0/68px no-repeat',
      })),
      state('active', style({
        //manually copied & pasted this in ./dist and it works
        background: 'url(./other-bg.jpg)  0 0/68px no-repeat',
      })),
      transition('inactive => active', [
        animate('0.3s ease-in')
      ]
      ),
      transition('active => inactive', animate('1.5s')
      )
    ])
  ]
})
export class AppComponent {
  url = require("../assets/bg.jpg");
}

[bkamara]

I'm generating my image urls based off a result of a function, similar to this:
<img class="conditions" src="./assets/img/SVG/{{ selectImage(forecast[0].code) }}"/>.

However, I'm getting 'Module not found: Error cannot resolve './assets/img/SVG/{{ selectImage(forecast[0].code) }}'' errors. How can I resolve this?

[glaucomorais]

Replace "./" for "../".
The assets folder is an level up. That's why webpack can't resolve the resource.

[bkamara]

I tried that. It still gives me the error.

[glaucomorais]

So you must look which level your assets folder is from the template file you are casting the asset file.

[bkamara]

The path to my image is correct. I decided to test it out by putting it in when I opened the dev tools and manipulating the DOM. I believe it deals with the issue of having to require the image link in the re file before using it within the HTML.

[glaucomorais]

Maybe is the interpolation... Try to use ng-src="./assets/img/SVG/{{ selectImage(forecast[0].code) }}".
Even so you'll need to check if Webpack exported the images that you referring to.

[bkamara]

ng-src wouldn't work since I'm using Angular 2/4. I tried it out anyways and it said that ng-src wasn't a property of img. I also tried [src] and took out the interpolation and that didn't work as well.

[Leonardonline]

Hello,

You need to import your image if you want to import it in dist forlder.
Here Webpack load your image as a string (because it's only a string)

You need to require the file like this

backgroundUrl = require('../assets/bg.jpg');

 <img [src]="backgroundUrl">

This will generate a copy of the image ( somethings like background.fb47ebd287a34c66287e.jpg ) but in the assets folder it's still present the original file.

How to avoid that?