如何在 Angular 5 中添加图像？答案

【问题标题】：How do you add images in Angular 5?如何在 Angular 5 中添加图像？
【发布时间】：2019-12-22 00:30:49
【问题描述】：

所以我正在尝试将我的徽标图像添加到 Angular5/Ionic 项目中。

我使用 HTML 文件作为模板，然后在需要使用它的所有文件中调用它。

不幸的是，如果我尝试在 HTML 模板文件中添加图像，我会在浏览器控制台中收到一条错误消息：

http://localhost:4200/src/assets/images/Pair_and_Share_Business_Card_Front_Final_Edit_v2-1.png404（未找到）

我尝试从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>

id 期望由于这是我当前用于注册页面的模板文件，因此在添加普通 HTML 文件中的图像后，它将从给定文件夹中获取图像并显示在注册页面。

我的 signup.component.ts 文件有一个 @Component 从这个 signup.component.html 导入模板 URL，这是我拥有的以下代码。

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css', '../auth.style.css']
})

那么为什么我的徽标没有出现在应用程序上？

谁能帮帮我。

PS：请耐心等待，我对所有这些东西都是新手，我可能会有初学者问题。

【问题讨论】：

“src”是正确的文件夹吗？通常，您将资产复制到 dist 文件夹并仅使用 /assets/ 引用它们。如果您打开 angular.json 文件，您可以看到发生这种情况的位置，即为什么要复制 assets 文件夹中的文件。
是的，那里是正确的文件夹。我正在使用 VS 代码，它会自动向我显示给定的路径，因此我知道路径应该不是问题。我刚刚尝试进入 angular.json 文件，并在资产“src/assets/images”下添加了一个新路径，因为这是包含徽标的文件夹，但没有任何改变，它仍然给我同样的错误。
好吧，这只是个人经验，tutorials online 另有说法，但如果你说它是正确的，那我就错了，对不起。

标签： javascript html angular firebase ionic-framework

【解决方案1】：

在具有角度的 ionic5 上，以下所有路径在我在 ionic serve 下的测试中都可以正常工作。我还没有在实际设备上测试过。

<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">

当大小写（png/PNG）与文件夹中的文件名不匹配时不起作用。这是在 Ubuntu 环境中。

在 Windows 的 Ionic3 上，文件扩展名的大小写不匹配是可以的。

【讨论】：

【解决方案2】：

在我的情况下，文件夹结构和图像调用如下

组件：[my-app]/src/app/components/[my-component] 图片：[my-app]/src/assets/images/[my-image]

为了从组件访问位于 images 文件夹中的图像，您应该使用以下结构

<img src="/assets/images/[your-image.png]>

注意资产前的斜杠。

【讨论】：

【解决方案3】：

在运行应用程序时，将从某种构建文件夹中读取所有文件。在 Angular 应用程序中，这将是 dist，而在 Ionic (Cordova) 中，它是 www。您永远不应该在图像路径中包含src，因为在编译您的应用程序时该目录将不存在。如果您从图像参考中删除/src/（即使用<img src="assets/images/Pair_and_Share_Business_Card_Front_Final_Edit_v2-1.png">），它应该可以工作。

【讨论】：