Question

我是学习角度4框架的初学者，已经在stackoverflow上看到了关于这个问题的所有线程，但是他们给出的解决方案无法解决我的问题。

我收到此错误“ http://localhost:4200/src/assets/images/1.jpg 404（未找到）”。所有其他功能正常但只有图像没有加载。我给出了.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": {
    }
  }
}

有谁能告诉我这里有什么问题。在此先感谢!!

Answer 1

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

Answer 2

试试这个，

select t1.*
from t1 left join
     (values ('Grabbed', 1), ('Closed', 2), ('Open', 3)) v(status, priority)
     on t1.status = v.status
order by coalesce(v.priority, 4);

Answer 3

应该是

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

并确保index.html <base href="/">代码中包含<head>

Answer 4

假设您的HelloComponent位于"src > app"文件夹中，以下标记应显示图片：

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

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

Answer 5

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

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

<img [attr.src]="myIcon" />

这将导致图像的字节通过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

Answer 6

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

Answer 7

更改文件夹路径来自

E：\ Data \ project-1 \ Angular（learning）\ app

收件人

E：\ Data \ project1 \ Angular（学习）\ app

Answer 8

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

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

8 个答案: