你如何在 Angular 5 中添加图像？
[英]How do you add images in Angular 5?
问题描述
So I'm trying to add an image of my logo into an Angular5/ Ionic project.
所以我试图将我的徽标图像添加到 Angular5/Ionic 项目中。
I'm using an HTML file as a template then I call it in all the files where it needs to be used.我使用 HTML 文件作为模板，然后在需要使用它的所有文件中调用它。
Unfortunately, if I try to add the image in the HTML template file, I get an error in the browser console stating the following:不幸的是，如果我尝试在 HTML 模板文件中添加图像，我会在浏览器控制台中收到一条错误消息，指出以下内容：
http://localhost:4200/src/assets/images/Pair_and_Share_Business_Card_Front_Final_Edit_v2-1.png 404 (Not Found) http://localhost:4200/src/assets/images/Pair_and_Share_Business_Card_Front_Final_Edit_v2-1.png 404（未找到）
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我尝试从 component.ts 文件调用图片但没有成功 我尝试在资产中创建新文件夹 我尝试重命名徽标文件
<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. id 期望因为这是我目前用于注册页面的模板文件，所以在像普通 HTML 文件一样添加图像后，它会从给定的文件夹中获取图像，并且会显示标志上页。
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.我的 signup.component.ts 文件有一个 @Component ，它正在从此 signup.component.html 导入模板 URL，这是我拥有的以下代码。
@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. PS：请耐心等待，我是所有这些东西的新手，我可能有初学者的问题。
3 个解决方案
解决方案1
2 2019-08-16 07:35:43
In my case, the folder structure and image call is as follows在我的情况下，文件夹结构和图像调用如下
component: [my-app]/src/app/components/[my-component] Image : [my-app]/src/assets/images/[my-image]组件： [my-app]/src/app/components/[my-component]图片： [my-app]/src/assets/images/[my-image]
In order to access an image located in the images folder from a component, you should use the following structure为了从组件访问位于图像文件夹中的图像，您应该使用以下结构
<img src="/assets/images/[your-image.png]>
notice the trailing slash before assets.注意资产前的斜杠。
解决方案2
0 已采纳 2019-08-15 15:56:54
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 .在 Angular 应用程序中，这将是dist而在 Ionic (Cordova) 中，它是www 。 You should never have src in the image path as this directory won't exist when your app is compiled.您永远不应该在图像路径中包含src ，因为编译您的应用程序时该目录将不存在。 If you remove the /src/ from your image reference (ie use <img src="assets/images/Pair_and_Share_Business_Card_Front_Final_Edit_v2-1.png"> ), it should work.如果您从图像参考中删除/src/ （即使用<img src="assets/images/Pair_and_Share_Business_Card_Front_Final_Edit_v2-1.png"> ），它应该可以工作。
解决方案3
0 2020-10-30 17:15:07
On ionic5 with angular, all of the following paths works fine in my tests under ionic serve.在带有 angular 的 ionic5 上，以下所有路径在我的 ionic serve 测试中都可以正常工作。 I have not tested this on the actual device.我没有在实际设备上测试过这个。
<img src="assets/imgs/facebook.png"> <img src="/assets/imgs/facebook.png"> <img src="../assets/imgs/facebook.png"> <img src="/../assets/imgs/facebook.png"> <img src="../../assets/imgs/facebook.png"> <img src="assets/imgs/facebook.png"> <img src="/assets/imgs/facebook.png"> <img src="../assets/imgs/facebook.png"> <img src="/../assets/imgs/facebook.png"> <img src="../../assets/imgs/facebook.png">
What does not work is when the case (png/PNG) does not match with filename in the folder.当大小写 (png/PNG) 与文件夹中的文件名不匹配时，不起作用。 This is in Ubuntu environment.这是在Ubuntu环境中。
On Ionic3 in Windows, mismatch case on filename extension is ok.在 Windows 中的 Ionic3 上，文件扩展名大小写不匹配是可以的。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.