Angular 2/4 img src

I'm simply trying to render an image in a component. I can't seem to find a decent answer that works.

Can someone point me in the right direction?

Enviroment:

angular/cli 1.1.2

node 8.1.0

OS win x64

angular -v 4.2.5

What I have tired (HTML):

<img [src]={{imgUrl}} /> <img [src]="imgUrl" /> <img src={{imgUrl}} /> <img src="imgUrl" /> <img ng-src="imgUrl" /> <img src="assets/images/img.jpg" /> <!-- and a few more --> 

With .ts file like:

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { imgUrl = ""; constructor() {} ngOnInit() { this.imgUrl = 'assets/images/img.jpg'; // i have also tried // ~/assets/... // ./assets/... // etc } } 

Project structure:

src --app ----home ------ts-files --assets ----images ------img.jpg 

I have also tried moving the file from assets to the same ts folder, and some other places.

But I only get the same 404 error.

GET http://localhost:4200/assets/images/img.jpg 404 (Not Found)

UPDATE

.angular-cli.json content (autogenerated):

{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": "Test" }, "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", "test": "test.ts", "tsconfig": "tsconfig.app.json", "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ "styles.css" ], "scripts": [], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ], "e2e": { "protractor": { "config": "./protractor.conf.js" } }, "lint": [ { "project": "src/tsconfig.app.json" }, { "project": "src/tsconfig.spec.json" }, { "project": "e2e/tsconfig.e2e.json" } ], "test": { "karma": { "config": "./karma.conf.js" } }, "defaults": { "styleExt": "css", "component": {} } }