Javascript 如何在Angular 5中添加图像？_Javascript_Html_Angular_Firebase_Ionic Framework

Javascript 如何在Angular 5中添加图像？

javascript html angular firebase ionic-framework

Javascript 如何在Angular 5中添加图像？,javascript,html,angular,firebase,ionic-framework,Javascript,Html,Angular,Firebase,Ionic Framework,因此，我试图在Angular5/Ionic项目中添加我的徽标图像我使用一个HTML文件作为模板，然后在需要使用它的所有文件中调用它不幸的是，如果我尝试在HTML模板文件中添加图像，我会在浏览器控制台中收到一个错误，说明如下： 404（未找到）我尝试从component.ts文件调用图片，但没有成功我已尝试在资源中创建新文件夹我已尝试重命名徽标文件 <main> <section> <form [formGroup]="signUpForm" (ngSubm

因此，我试图在Angular5/Ionic项目中添加我的徽标图像

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

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

404（未找到）

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

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

谁能帮我一下吗

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

运行应用程序时，所有文件都将从某种构建文件夹中读取。在Angular应用程序中，这将是

dist

，而在Ionic（Cordova）中则是

www

。你不应该在映像路径中有

src

，因为编译应用程序时，此目录将不存在。如果从图像引用中删除

/src/

（即使用

），它应该可以工作。

运行应用程序时，所有文件都将从某种生成文件夹中读取。在Angular应用程序中，这将是

dist

，而在Ionic（Cordova）中则是

www

。你不应该在映像路径中有

src

，因为编译应用程序时，此目录将不存在。如果从图像引用中删除

/src/

（即使用

），它应该可以工作。

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

组件：

[my app]/src/app/components/[my component]

图像：

[my app]/src/assets/images/[my Image]

要从组件访问位于“图像”文件夹中的图像，应使用以下结构

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

请注意资产前面的尾随斜杠。

在我的例子中，文件夹结构和图像调用如下

组件：

[my app]/src/app/components/[my component]

图像：

[my app]/src/assets/images/[my Image]

要从组件访问位于“图像”文件夹中的图像，应使用以下结构

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

请注意资源前的尾随斜杠。

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

如果大小写（png/png）与文件夹中的文件名不匹配，则不起作用。这是在Ubuntu环境中

在Windows中的Ionic3上，文件扩展名不匹配的情况是可以的。

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

如果大小写（png/png）与文件夹中的文件名不匹配，则不起作用。这是在Ubuntu环境中

在Windows中的Ionic3上，文件扩展名大小写不匹配是正常的。

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