图像路径在我的 Angular 4 文件中不起作用答案

【问题标题】：Path to images not working in my Angular 4 file图像路径在我的 Angular 4 文件中不起作用
【发布时间】：2018-01-27 23:50:38
【问题描述】：

我是学习 Angular 4 框架的初学者，并且已经在 stackoverflow 上看到了有关此问题的所有线程，但其中给出的解决方案无法解决我的问题。

我收到此错误“http://localhost:4200/src/assets/images/1.jpg404（未找到）”。所有其他操作都正常，但只有图像未加载。我给出了我的 .angular-cli.json 代码和我的定制组件代码，其中我给出了我的 img 标签。

我的自定义组件代码：-

import { Component } from '@angular/core';


@Component({
    selector:'my-comp',
    template:`<button (mousemove)="clicked($event)">{{name1}}</button>
                <div *ngIf="applyDiv==false">WTF</div>
                <ul>
                    <li *ngFor="let i of a;let j=index">{{j}}.{{i}}</li>
                </ul>    

                <img src="../../src/assets/images/1.jpg" alt="Ms dhoni" width="2000" height="2000"/>
                <input type="text" name="Sahil" value="sahil"/>
                <div [class.myClass]="myclass">Apply Class</div>
                <div [style.color]="applyBlue?'blue':'yellow'">Starting Angualr</div>`,
    styleUrls:['./hello.component.css']


})

export class HelloComponent {
    name='Angular1';
    myclass=true;
    applyBlue=true;
    name1=0;
    applyDiv=false;
    a=[1,'2','3iituit'];
    clicked(event){
        console.log(event.target);
        this.name1++;
    }
   // name1:string="sahil";
    //logo="../../assets/images/mov2.jpg";
}

我的代码 .angular-cli.json:-

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "my-app"

  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [

        "assets/images",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {
    }
  }
}

谁能告诉我这里有什么问题。提前致谢！！

【问题讨论】：

路径不应包含src，src 文件夹是您应用的根目录。 http://localhost:4200/assets/images/1.jpg
@Ploppy，我也尝试过使用它，但这也不起作用
这个案子你解决了吗？

标签： javascript json angular

【解决方案1】：

您应该将图像放在 src 文件夹内的 assets 文件夹中，然后您可以将路径指定为 assets/../image.png

【讨论】：

【解决方案2】：

假设您的HelloComponent 位于"src > app" 文件夹内，则以下标签应显示图像：

<img src="../../assets/images/1.jpg" 
          alt="Ms dhoni" 
          width="2000" height="2000"/>

如果它仍然没有显示，那么如果您使用的是 IDE fir 开发，请将图像从 assets 文件夹中拖放到 tge app 文件夹内的 .html 文件之一中。检查那里的图像src路径。

【讨论】：

【解决方案3】：

尝试在绘画中增加图像的尺寸。我在路径 src/assets/Library/Images 中有一个尺寸为 60 x 45 的图像未加载，而一个尺寸为 225 x 225 的图像已成功加载。希望这会有所帮助！

【讨论】：

【解决方案4】：

试试这个，

<img [src]="../../src/assets/images/1.jpg" alt="Ms dhoni" width="2000" height="2000"/>

【讨论】：

我只是使用标签，我没有做任何属性绑定。
模板解析错误：解析器错误：意外令牌。在 [../../assets/images/1.jpg] 的第 1 列，在 ng:///AppModule/HelloComponent.html@6:21 (" ][src] ="../../assets/images/1.jpg" alt="Ms dhoni" width="2000" height="2000"/>
试试
试试是这与您在上面发布的内容不同
没有 / 标签

【解决方案5】：

应该是

   <img src="assets/images/1.jpg" alt="Ms dhoni" width="200px" height="200px"/>

并确保您在 index.html <head> 标签中有 <base href="/">

【讨论】：

，我已经尝试过了，这给出了以下错误：“加载资源失败：服务器响应状态为 404（未找到）”
localhost:4200/assets/images/1.jpg 这个错误来了，我已经通过查看有关堆栈溢出的相同问题的线程尝试了所有这些
好吧，还有一件事，你的 baseUrl 是什么，你有 in index.html 吗？

【解决方案6】：

查看应用程序所在的 /dest 文件夹（或任何您配置为 webpack 输出的文件夹）。您是否看到任何与所请求的路径相对应的路径？如果不是那么，显然，浏览器将无法加载它。

这是因为 Webpack（或您正在使用的任何打包程序）无法知道在您的应用程序的最终部署中包含哪些资产，除非您告诉它 - 所以文件不存在。因此，您可以使用文件加载器（或 url-loader）配置 Webpack 以将图像输出到目标文件夹结构的路径，或者您可以将组件的属性设置为 require('my image url here ') 函数，例如this.myIcon=require('images/abc.png')。使用这些属性对您的 IMG 标签进行属性绑定，例如

&lt;img [attr.src]="myIcon" /&gt;

这将导致图像的字节通过 data: url 直接嵌入到 src 属性中（检查 Chrome 中的最终元素以查看）。（这最后一部分我可能不完全正确，但某些东西肯定会将图像转换为您的 IMG src 的 base64 编码数据，以使它们出现在目标文件夹中不存在的情况下。）

恕我直言，这是一个很大的缺点，比如使用 Webpack 的 Angular 2 方法。您必须配置如此多的废话才能生成可用的应用程序，最终可能会让您重新考虑整个平台。你对整个 Angular 2 交付过程的这一部分了解得越好，你就会越快乐。这是一篇可能有帮助的文章的链接：https://medium.com/a-beginners-guide-for-webpack-2/copy-all-images-files-to-a-folder-using-copy-webpack-plugin-7c8cf2de7676

【讨论】：

【解决方案7】：

更改文件夹路径来自

E:\Data\project - 1\Angular(学习)\app

收件人

E:\Data\project1\Angular(学习)\app

【讨论】：

【解决方案8】：

唯一的解决方案是将所有图像转换为base64。并复制链接并将其粘贴到 img src=""。

【讨论】：