URL-адрес динамической фотографии Ionic 4 не работает - изображение не отображается

В моем приложении я делаю это:

<ion-col *ngFor  = "let place of intentList, let photo of photoList">
        <ion-card>
          <ion-card-content>
          <img class = "img" src = "{{photo}}" (click) = "clickedImage(place.intent)">
          <div>{{place.val}}</div>
          </ion-card-content>
        </ion-card>
      </ion-col>

массив photoList содержит строки с разными URL-адресами фотографий. Это массив:

this.photoList = ["./assets/images/001-breakfast.png", "./assets/images/002-brunch.png", "./assets/images/003-sandwich.png",
      "./assets/images/004-food.png", "./assets/images/005-dinner.png", "./assets/images/006-cake.png", "./assets/images/007-cocktail.png"]

Но вот как выглядит мое приложение: URL-адрес динамической фотографии Ionic 4 не работает - изображение не отображается

html ionic-framework ionic4

15.02.2019 10:59

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

1 648

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Это потому, что вы не можете запустить 2 цикла в angular. Таким образом, вы на самом деле не получаете значение пути к фотографии в своей переменной фотографии. Но вместо этого вы получаете значение переменной place в переменной photo.

Вы можете проверить это, напечатав значение фотографии

{{photo}}

15.02.2019 12:11

Ответ принят как подходящий

<ion-col *ngFor  = "let place of intentList; let i=index;">
        <ion-card>
          <ion-card-content>
          <img class = "img" src = "{{photo[i]}}" (click) = "clickedImage(place.intent)">
          <div>{{place.val}}</div>
          </ion-card-content>
        </ion-card>
      </ion-col>

Вы можете добиться этого, используя индекс:

15.02.2019 12:15

Другие вопросы по теме

Как я могу тестировать и отлаживать приложение Chrome для Android

Как увеличить изображение на 10% от его родителя?

Ionic 3 работает медленно на iOS 12

Как очистить ионное хранилище перед отправкой новых данных

Как показать подменю на боковой панели для отображения меню в цикле в Ionic

Ионные push-уведомления не работают в iphone

Как применить один и тот же CSS к Android и IOS в приложении Ionic

Firebase молча терпит неудачу при нажатии объекта

Ионная сборка не может найти ошибку модуля. Как импортировать Android-плагин?

Ionic 4 изменяет размер и цвет кнопки

URL-адрес динамической фотографии Ionic 4 не работает - изображение не отображается

Ответы 2

Другие вопросы по теме

Похожие вопросы