Issue
So I'm trying to add an image of my logo into an Angular5/ Ionic project.
I'm using an HTML file as a template then I call it in all the files where it needs to be used.
Unfortunately, if I try to add the image in the HTML template file, I get an error in the browser console stating the following:
http://localhost:4200/src/assets/images/Pair_and_Share_Business_Card_Front_Final_Edit_v2-1.png 404 (Not Found)
I have tried calling the picture from component.ts file with no success I have tried creating new folders inside the assets I have tried renaming the logo file
<main>
<section>
<form [formGroup]="signUpForm" (ngSubmit)="signUp()">
<h3>Welcome to Pair Share</h3>
<body>
<img
src="/src/assets/images/Pair_and_Share_Business_Card_Front_Final_Edit_v2-
1.png">
</body>
<p>Lets get started</p>
<mat-form-field [formGroup]="signUpForm">
<input matInput placeholder="Enter your email" [formControl]="email"
required>
<mat-error *ngIf="email.valid">Not a valid email</mat-error>
</mat-form-field>
<mat-form-field [formGroup]="signUpForm">
<input matInput placeholder="Enter your password" [type]="hide ?
'password' : 'text'" [formControl]="password" required>
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' :
'visibility_off' }}</mat-icon>
<mat-error *ngIf="password.valid">Not a valid password</mat-error>
</mat-form-field>
<button mat-raised-button type="submit" color="accent">Sign up</button>
</form>
</section>
</main>
The id is expecting that since this the template file that I'm currently using for a signup page, that after adding an image like in a normal HTML file, it would get the image from its given folder and it would show up the on sign up page.
My signup.component.ts file has a @Component that is importing a template URL from this signup.component.html and this is the following code that I have.
@Component({
selector: 'app-signup',
templateUrl: './signup.component.html',
styleUrls: ['./signup.component.css', '../auth.style.css']
})
So how come my logo is not showing up on the app?
Could anyone please help me out.
PS: Bear with me, I'm new to all of this stuff, and I might have beginner questions.
Solution
When running the app, all files will be read from some sort of build folder. In Angular apps this would be dist and in Ionic (Cordova) it is www. You should never have src in the image path as this directory won't exist when your app is compiled. If you remove the /src/ from your image reference (i.e. use <img src="assets/images/Pair_and_Share_Business_Card_Front_Final_Edit_v2-1.png">), it should work.
Answered By - Alex Steinberg
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.