Html 未找到 Angular 4 img src
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45040843/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 4 img src is not found
提问by Annk
I'm having a problem with sourcing an image with angular 4. It keeps telling me that the image is not found.
我在获取角度为 4 的图像时遇到问题。它一直告诉我找不到图像。
Folder structure:
文件夹结构：
app_folder/
app_component/
- my_componenet
- image_folder/
- myimage
I am using the image in mycomponent. If in mycomponent, I insert it directly with:
我在mycomponent. 如果在mycomponent，我直接插入它：
<img src="img/myimage.png"
This works fine, but I checked the html and it creates a hash. But my images have to be dynamically added to the html because they are part of a list. So, if I use:
这工作正常，但我检查了 html 并创建了一个哈希。但是我的图像必须动态添加到 html 中，因为它们是列表的一部分。所以，如果我使用：
<img src="{{imagePath}}">
which is basically img/myimage.png, it doesn't work. If I use:
这基本上img/myimage.png是行不通的。如果我使用：
<img [src]="imagePath">
It says NOT FOUND (htttps://localhost/img/myimage.png). Can you help me?
它说NOT FOUND (htttps://localhost/img/myimage.png)。你能帮助我吗？
回答by Yoav Schniederman
AngularJS
AngularJS
<img ng-src="{{imagePath}}">
Angular
角
<img [src]="imagePath">
回答by CharanRoot
Copy your images into the assets folder. Angular can only access static files like images and config files from assets folder.
将您的图像复制到资产文件夹中。Angular 只能从资产文件夹访问静态文件，如图像和配置文件。
Try like this: <img src="assets/img/myimage.png">
像这样尝试： <img src="assets/img/myimage.png">
回答by Amir Twito
Create image folder under the assets folder
在assets文件夹下创建image文件夹
<img src="assets/images/logo_poster.png">
回答by Deepak Jha
in your component assign a variable like,
在您的组件中分配一个变量，例如，
export class AppComponent {
netImage:any = "../assets/network.jpg";
title = 'app';
}
use this netImage in your src to get the image, as given below,
在你的 src 中使用这个 netImage 来获取图像，如下所示，
<figure class="figure">
<img [src]="netImage" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
回答by Fakh Ri
@Annk you can make a variable in the __component.ts file
@Annk 你可以在 __component.ts 文件中创建一个变量
myImage : string = "http://example.com/path/image.png";
myImage : string = " http://example.com/path/image.png";
and inside the __.component.html file you can use one of those 3 methods :
在 __.component.html 文件中，您可以使用以下 3 种方法之一：
1 .
1 .
<div> <img src="{{myImage}}"> </div>
2 .
2 .
<div> <img [src]="myImage"/> </div>
3 .
3 .
<div> <img bind-src="myImage"/> </div>
回答by David Donari
Angular 4 to 8
角 4 到 8
Either works
要么有效
<img [src]="imageSrc" [alt]="imageAlt" />
<img src="{{imageSrc}}" alt="{{imageAlt}}" />
and the Component would be
和组件将是
export class sample Component implements OnInit {
imageSrc = 'assets/images/iphone.png'
imageAlt = 'iPhone'
Tree structure:
树结构：
-> src
-> app
-> assets
-> images
'iphone.png'
回答by Annk
Well, the problem was that, somehow, the path was not recognized when was inserted in srcby a variable. I had to create a variable like this:
好吧，问题是，不知何故，当被src变量插入时，路径无法识别。我必须创建一个这样的变量：
path:any = require("../../img/myImage.png");
and then I can use it in src. Thanks everyone!
然后我可以在src. 谢谢大家！
回答by Kapil Thakkar
<img src="images/no-record-found.png" width="50%" height="50%"/>
Your images folder and your index.html should be in same directory(follow following dir structure). it will even work after build
你的图像文件夹和你的 index.html 应该在同一个目录中（遵循以下目录结构）。它甚至可以在构建后工作
Directory Structure
目录结构
-src
|-images
|-index.html
|-app
回答by Mises
Angular can only access static files like images and config files from assets folder. Nice way to download string path of remote stored image and load it to template.
Angular 只能从资产文件夹访问静态文件，如图像和配置文件。下载远程存储图像的字符串路径并将其加载到模板的好方法。
public concateInnerHTML(path: string): string {
if(path){
let front = "<img class='d-block' src='";
let back = "' alt='slide'>";
let result = front + path + back;
return result;
}
return null;
}
In a Component imlement DoCheck interface and past in it formula for database. Data base query is only a sample.
在组件中实现 DoCheck 接口并在其中传递数据库的公式。数据库查询只是一个示例。
ngDoCheck(): void {
this.concatedPathName = this.concateInnerHTML(database.query('src'));
}
And in html tamplate <div [innerHtml]="concatedPathName"></div>
并在 html 模板中 <div [innerHtml]="concatedPathName"></div>
回答by ionMobDev
You have to mention the width for the image as default
您必须提及图像的默认宽度
<img width="300" src="assets/company_logo.png">
its working for me based on all other alternate way.
它基于所有其他替代方式为我工作。
