it-swarm.com.ru

Изображения не загружаются в Angular 2

HTML-файл:

 <div>
      <img  src="New-Google-Logo.png"/>
    </div>

Здесь New-Google-Logo.png находится в той же папке, что и в HTML-файле. Но после ng обслужите HTML-страницу с другими деталями, но не с изображением. Попробовав прямую ссылку на изображение (например, www.google.com/images/x.png), оно работает, но локальный файл не загружается.

Дерево папок:

src
  -app
    -logincomponent
              - logincomponent.html
              - logincomponent.css
              - New-Google-Logo.png
              - logincomponent.ts
     -homecomponent
              - homecomponent.html
              - homecomponent.css
              - homecomponent.ts

Здесь New-Google.png упоминается внутри logincomponent.html, как указано выше.

Попробуйте 2:

src
  -app
    -logincomponent
              - logincomponent.html
              - logincomponent.css
              - Images
                - New-Google-Logo.png
              - logincomponent.ts

И указано в HTML, как:

<div>
      <img  src="./images/New-Google-Logo.png"/>
 </div>

Оба эти не сработали.

5
Amal

Если вы используете angular-cli, все ваши статические ресурсы должны храниться в папке активов. Тогда вы должны указать путь как

 <div>
      <img  src="assets/images/New-Google-Logo.png"/>
 </div>

Когда вы обслуживаете проект, все статические активы должны быть переданы клиенту, чтобы отобразить его на клиенте. Angular Cli собирает и упаковывает весь проект в js-файлы. Чтобы обслуживать ваши статические активы, вы можете использовать два способа 

  • поместите все ваши статические активы в папку активов, которую angular-cli обслуживает по умолчанию .angular-cli.json 
  • или вам нужно сделать запись в папке статических ресурсов в файле .angular-cli.json в массиве, названном как ресурсы, так как моя папка изображений находится в статической папке, а статическая папка находится на том же уровне иерархии папки ресурсов 

    "assets": [ "assets", "static/images" ]
    
17
Prathmesh Dali

Если вы создаете проект с помощью CLI, у вас будет одна папка ресурсов, просто создайте в ней одну папку с изображениями и вставьте в нее все изображения типа .png, а затем укажите
reference src = "assets/images/AnyImage.png" внутри вашего html будет загружать изображения. На самом деле вы вставили свои изображения в папку loginComponent. Попробуйте это, это будет работать.

0
AMIR NEHAL