Reputation: 4667
I'm pretty new to Angular so I'm not sure the best practice to do this.
I used angular-cli and ng new some-project
to generate a new app.
In it created an "images" folder in the "assets" folder, so now my images folder is src/assets/images
In app.component.html
(which is the root of my application), I put
<img class="img-responsive" src="assets/images/my image.png">
When I do ng serve
to view my web application, the image does not display.
What is the best practice to load up images in an Angular application?
EDIT: See answer below. My actual image name was using spaces, which Angular did not like. When I removed the spaces in the file name, the image displayed correctly.
Upvotes: 218
Views: 690178
Reputation: 1
Go to angular.json and change inputs
in the assets
option...
I changed it from "public" to src/assets
, so now all the images, fonts, ... that I put inside this, I will import as: images/logo.png
my folders is like this:
src
|- assets
|- images
|- logo.png
this works for me, I hope it helps
Upvotes: 0
Reputation: 61
In angular.json
change
"assets": [
{
"glob": "**/*",
"input": "public",
}
to:
"assets": [
{
"glob": "**/*",
"input": "public",
"output": "/"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
}
]
Upvotes: 6
Reputation: 1
I know this is an old question, but incase someone comes around it again, a method i found to work is the following.
Place 'Assets' & 'Vendor' and any other folders/files you would like to access from your Angular app.
in Angular.json ensure that you have
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
And finally access your resources/files like
"..img src="/assets/images/featured-01.png" alt="" style="max-width: 44px;.."
in your components, they show as they should.
If there is anything wrong with my response, please correct me politely, do not bash me. I am learning as well.
Upvotes: 0
Reputation: 11
when you copy the path the src copied also so your path to be start with src/assets/img... , but you need the path begin without src/ so delete that
Upvotes: 1
Reputation: 3106
You can follow the below steps in Angular 8+
Step 1: load the image as below in component
const logo = require('../assets/logo.svg').default as string;
@Component({
selector: 'app-show-image',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class ShowImageComponent implements OnInit {
logo = logo;
constructor() { }
ngOnInit() { }
}
step 2: Add the logic in html file
<img [src]="logo" [alt]="'logo'">
If launched without further configuration, you will see a strange error:
ERROR in src/app/app.component.ts(4,14): error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
Do as suggested – add the @types/node
typings to your project by running npm install @types/node
and edit tsconfig.app.json
to set:
"compilerOptions": {
"types": ["node"],
...
}
For more info resource
Upvotes: 6
Reputation: 31
Try not give space while loading the images.
Instead of
<img src='assets/img/myimage.png' alt="">
try with string interpolation or Property Binding to load the source image as best practice.
Upvotes: 0
Reputation: 3819
for me "I" was capital in "Images". which also angular-cli didn't like. so it is also case sensitive.
Some web servers like IIS don't have problem with that, if angular application is hosted in IIS, case sensitive is not a problem.
Upvotes: 3
Reputation: 7115
In my project I am using the following syntax in my app.component.html:
<img src="/assets/img/1.jpg" alt="image">
or
<img src='http://mruanova.com/img/1.jpg' alt='image'>
use [src] as a template expression when you are binding a property using interpolation:
<img [src]="imagePath" />
is the same as:
<img src={{imagePath}} />
Source: how to bind img src in angular 2 in ngFor?
Upvotes: 176
Reputation: 71
It is always dependent on where is your html file that refers to the path of the static resource (in this case the image).
Example A:
src
|__assests
|__images
|__myimage.png
|__yourmodule
|__yourpage.html
As you can see, yourpage.html is one folder away from the root (src folder), for this reason it needs one amount of ../ to go back to the root then you can walk to the image from root:
<img class="img-responsive" src="../assests/images/myimage.png">
Example B:
src
|__assests
|__images
|__myimage.png
|__yourmodule
|__yoursubmodule
|__yourpage.html
Here you have to go u in the tree by 2 folders:
<img class="img-responsive" src="../../assests/images/myimage.png">
Upvotes: 5
Reputation: 2221
Angular-cli includes the assets folder in the build options by default. I got this issue when the name of my images had spaces or dashes. For example :
If you put the image in the assets/img folder, then this line of code should work in your templates :
<img alt="My image name" src="./assets/img/myImageName.png">
If the issue persist just check if your Angular-cli config file and be sure that your assets folder is added in the build options.
Upvotes: 44
Reputation: 707
1 . Add this line on top in component.
declare var require: any
2 . add this line in your component class.
imgname= require("../images/imgname.png");
add this 'imgname' in img src tag on html page.
<img src={{imgname}} alt="">
Upvotes: 9
Reputation: 573
Being specific to Angular2 to 5, we can bind image path using property binding as below. Image path is enclosed by the single quotation marks.
Sample example
<img [src]="'assets/img/klogo.png'" alt="image">
Upvotes: 22
Reputation: 4667
I fixed it. My actual image file name had spaces in it, and for whatever reason Angular did not like that. When I removed the spaces from my file name, assets/images/myimage.png
worked.
Upvotes: 113
Reputation: 3612
Normally "app" is the root of your application -- have you tried app/path/to/assets/img.png
?
Upvotes: 10