Как вывести изображение на угловой? - PullRequest
0 голосов
/ 03 июля 2019

Как отобразить изображение в угловом формате?


<div><img  class="images" ng-src="{{./resources/img/new.png}}"/></div>

<div><img  class="images" src="./resources/img/new.png"/></div>```

Ответы [ 3 ]

1 голос
/ 03 июля 2019

Рассмотрим простые и легкие решения для вашей проблемы.

Более сложный код будет еще больше сбивать с толку.

Файл угловой js:

$scope.imageAddress='resources/img/new.png';

// The Path has to be exact.
// Check your project folder hierarchy for that.

HTML-файл:

<body ng-app = "myApp">
    <div ng-controller="myController">
        <img alt="" ng-src="{{ imageAddress }}" />
    </div>
</body>

И ваш путь будет соответствовать файлу HTML, в котором вы написали исходный код вашего изображения.

Например: - Если ваш ng-src находится в пути Index.html: resources / index.html

и ваш new.png находится в пути: resources / views / images / new.png

затем $ scope.imageAddress = 'views / images / new.png';

Еще одна вещь: Предпочитаю ng-src, чем src.

0 голосов
/ 03 июля 2019

Как угловой CLI работает с изображениями

Помните, когда мы использовали команду npm run build или ng build --prod? Angular CLI переместил все наши активы в папку dist. Он сделает то же самое, когда увидит, что в папке активов есть изображения.

Все, что нам нужно сделать, это связать эти изображения в наших шаблонах с путем, который начинается внутри папки src.

Например, если у нас есть изображение в src/assets/img/logo.png,, мы добавим это в наш шаблон:

шаблон: <img src="assets/img/logo.png"> Добавление изображения в папку активов Папка активов, созданная для нас Angular CLI, является идеальным местом для хранения изображений.

Давайте возьмем логотип Angular с сайта angular.io.

https://angular.io/assets/images/logos/angular/logo-nav@2x.png
0 голосов
/ 03 июля 2019

Изучите угловую привязку шаблона (https://angular.io/guide/template-syntax). Если у вас есть изображение в локальном стиле (./resources/img/new.png), вы можете использовать обычный HTML-тег исходного кода

<img  class="images" src="./resources/img/new.png"/>

или вашобраз приходит с сервера или динамически, в этот раз вам нужно привязать что-то вроде

img = this.imageSource
<img  class="images" src={{img}}/> or
<img class="images" [src]="img"/>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...