Как вывести изображения в картах через класс?

Question

[Esm322]

Подскажите, пожалуйста, почему не выводятся изображения в картах?
Класс карты:

class Card {
  _cardNumber = null;
  _opennedCard = false;
  _successfulCard = false

  constructor(container, cardNumber, flip) {
    this.cardNumber = cardNumber

    container.append(this.createElement(flip))
  }

  createElement(action) {
    const card = document.createElement('div');
    card.classList.add('card');

    card.textContent = this.cardNumber;

    card.addEventListener('click', () => {
      card.classList.add('openned');

      this._opennedCard = true;

      action(card)
    })

    return card;
  }

  set cardNumber(value) {
    this._cardNumber = value
  }

  get cardNumber() {
    return this._cardNumber
  }

  set open(value) {
    this._opennedCard = value
  }

  get open() {
    return this._opennedCard
  }

  set success(value) {
    this._successfulCard = value
  }

  get success() {
    return this._successfulCard
  }
}

Наследуемый класс:

class AmazingCard extends Card {
  set cardNumber(value) {
    const cardsImgArray = [
      './img/водопад.jpg',
      './img/глаз.jpg',
      './img/зонтик.jpg',
      './img/кот.jpg',
      './img/олень.jpg',
      './img/павлин.jpg',
      './img/пейзаж.jpg',
      './img/цветок.jpg'
    ];

    const img = document.createElement('img');
    img.classList.add('img-card');
    img.src = cardsImgArray[value];

    this.createElement(this.flip).append(img)
  }
}

Заранее спасибо

Comments

[Aetae]

То что бросается в глаза:
1. action.call(this, card) - при передаче теряется привязка к this.
2. card.textContent = this.cardNumber; - всегда будет null, т.к. ты переопределил сеттер но не геттер.

В целом что-то ты делаешь очень не так.

[Сергей Соловьев]

что вкладка Сеть в браузере говорит? может сервер не отдает картинки. Попробуй абсолютный путь проставить, а не относительный.

[Сергей Соловьев]

Также проверь, что кириллицу можно в адрес напрямую добавлять. Попробуй url_encode применить к адресам