Angular2加载图片

Question

I have a problem with including images, script or css in app with angular2. I have image in folder /app-name/img/image.jpg and <img> tag is in /app-name/src/app/my-component/my-component.component.html :

<img src="../../../img/image.jpg">

When i load page, i get error: GET http://localhost:4200/img/image.jpg 404 (Not Found)

How to create url address in angular2? The same problem is when i added script url in index.html.

Thanks for advices.

Answer 1

If you are using angular-cli to build your project.

You need to include your img directory in the list of assets that needs to be copied to the output (deployable) directory.

In the .angular-cli.json file, add the img directory to the below array:

apps[0].assets

And then you can use like below

<img src="img/image.jpg">

It would be something like

"apps": [
{
  "root": "src",
  "outDir": "dist",
  "assets": [
    "assets",
    "img"
  ],

Answer 2

It seems like you did not include your img folder into your src folder, so try to put it there and adjust your src attribute value to /img/image.jpg

in general: make sure everything you want to use inside you application is in your src folder. that content in there (and only that content) will then eventually be used to be processed(transpiled, bundled, minified and so on) and then end up in a webserver.

all other files outside of the src folder are for other purposes, like configuration files, node_modules, dist folders and so on