Не выходит текст заменить на изображения. Вместо изображения выдает undefined

Делаю рулетку в стиле колеса фортуны (основной код нашел в интернете) Под себя все настроил, кроме изображений. Вместо текста нужны изображения, заменил Text на img и начало выдавать undefined вместо картинки.

В кодинге буквально месяц и тренируюсь на этой рулетке. Помогите решить, пожалуйста.

HTML:

 <div class="roulette">
  <div class="spinner"></div>
  <div class="shadow"></div>
  <div class="markers">
    <div class="triangle">
    </div>
  </div>
  <div class="button">
    <span id="generate">Пуск</span>
    <audio id="caseOpenSound" preload="auto">
    <source src="https://www.dropbox.com/scl/fi/jhz4cc12xlso943ns9thh/go-new-gambling.mp3?rlkey=mko5wslyxtzorc6hdaa8gr7dh&dl=1" type="audio/mp3">
</audio>
  </div>
</div>

Css:

@import url("https://fonts.googleapis.com/css?family=Material+Icons|Work+Sans:400,700,900");
body {
  overflow: hidden;
}

.roulette {
  font-family: "Lucida Grande";
  display: block;
  position: absolute;
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -200px;
  transform: scale(1.2); /* Измените значение масштаба на 1.5 или другое по вашему усмотрению */
}

.roulette .shadow {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 60%;
    box-shadow: 0px 0px 15px #FFD700; /* Добавляем неоново желтую тень вокруг кнопки */
  border: 2px solid #FFD700; /* Изменяем цвет обводки на неоново желтый (жёлтый) */
}

.roulette .markers {
  display: block;
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  overflow: hidden;
  border-radius: 100%;
  box-shadow: 0px 0px 15px #FFD700; /* Добавляем неоново желтую тень вокруг кнопки */
  border: 2px solid #FFD700; /* Изменяем цвет обводки на неоново желтый (жёлтый) */
}

.roulette .markers .marker {
  position: absolute;
  width: 0;
  height: 0;
  top: -200px;
  left: 200px;
  transform-origin: 0% 400px;
  border: 0 solid transparent;
}

.roulette .markers .triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1em 0 1em 1em;
  border-color: transparent transparent transparent #007bff;
  position: absolute;
  border-left-color: #fff;
  top: 50%;
  left: -1px;
  margin-top: -1em;
  filter: drop-shadow(0 0.25em 0 rgba(0, 0, 0, 0.25));
}

.roulette .spinner {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  overflow: hidden;
  transform: rotateZ(0deg);
  /*performance boost*/
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.roulette .spinner .item {
  position: absolute;
  width: 0;
  height: 0;
  top: -200px;
  left: 200px;
  transform-origin: 0% 400px;
  border: 0 solid transparent;
 
}

.roulette .spinner .item .label {
  display: block;
  position: absolute;
  color: #fff;
  font-weight: 800;
  top: 0;
  left: 0;
  white-space: nowrap;
  transform-origin: 0 0;
  font-size: 0.8em;
}

.roulette .spinner .item .label i,
.roulette .spinner .item .label .text {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  font-size: 1em;
  text-indent: 0;
}

.roulette .spinner .item .label i {
  margin-right: 0.1em;
}

.roulette .button {
    font-family: "Lucida Grande";
  width: 10em;
  height: 10em;
  line-height: 10em;
  top: 50%;
  left: 50%;
  margin-left: -5em;
  margin-top: -5em;
  font-weight: 800;
  z-index: 998;
  position: absolute;
  background: rgb(111, 0, 255);
  border: none;
  border-radius: 100%;
  color: #FFE600;
  outline: none;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  transition: transform 0.15s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 0px 0px 15px rgb(111, 0, 255); /* Добавляем неоново фиолетовую тень вокруг кнопки */
  border: 2px solid rgb(111, 0, 255); /* Изменяем цвет обводки на неоново фиолетовый */
}

.roulette .button:hover {
  color: inherit;
}

.roulette .button span {
  font-size: 1.6em;
  letter-spacing: -0.05em;
}

.roulette.busy .button {
  transform: scale(0.9);
  box-shadow: 0 0.15em 0 rgba(0, 0, 0, 0.25);
  color: #999;
  cursor: default;
}

/* CUSTOM LABELS */
.roulette .spinner .item[data-type=quiz] .label {
  font-size: 0.6em;
}

.roulette .spinner .item[data-type=question] .label .text {
   font-size: 0.8em;
  width: 1em;
  text-align: center;
  margin-left: 8px; /* или padding-left: 20px; */
  margin-top: -3px; /* Подвигает текст на 10px вверх */
  line-height: 1.2;
}

.roulette .spinner .item[data-type=replay] .label .text {
  font-size: 0.8em;
  width: 1em;
  text-align: center;
  margin-left: 5px; /* или padding-left: 20px; */
  margin-top: -3px; /* Подвигает текст на 10px вверх */
  line-height: 1.2;
}

.roulette .spinner .item[data-type=replay] .label i {
  font-size: 0.6em;
}

.roulette .spinner .item[data-type=time] .label i {
  font-size: 0.8em;
}

JS:

var data = [
 //{ id: '', color: '#3f297e', text: 'ALL IN', ikon: 'invert_colors' },
{ id: "replay", type: "replay", color: "#ffd700", img: "https://www.dropbox.com/scl/fi/qyv5ohpd622p8jwiqm9pa/low-qua.png?rlkey=o24x580g7vwcodxbs4mzxo5rk&dl=1" }, 
 { id: '10', type: 'question', color: '#3f297e', img: "https://www.dropbox.com/scl/fi/rrvi60desvyk0vjmjyuji/Blue-10-A-Coin.jpg?rlkey=905ljiq2uoe0oohudsmadge72&dl=1" },
 { id: 'replay', type: 'replay', color: '#ffd700', img: "https://www.dropbox.com/scl/fi/nxhc2ebcm08f9ovqukq59/.png?rlkey=fvtl0tsvv9e6o8g7aeijqbrdz&dl=1" },
  { id: '50', type: 'question', color: '#3f297e', img: "https://www.dropbox.com/scl/fi/vt2ghyl7uvx69hmaihznv/Pink-50-A-Coin.jpg?rlkey=a1cl8lkjiz94asr12q4zkxesq&dl=1" },
 { id: '25', type: 'question', color: '#ffd700', img: "https://www.dropbox.com/scl/fi/azr9shb5bpl9hpgcesglq/Purple-25-A-Coin.jpg?rlkey=jhpzw2bciy9judbfs9gsnos46&dl=1" },
 { id: '500', type: 'question', color: '#3f297e', img: "https://www.dropbox.com/scl/fi/osn7rw08sza64cd61kzc9/Gold-500-A-Coin.jpg?rlkey=mek607jcimoteh85h5g7e00bz&dl=1" },
 { id: 'replay', type: 'replay', color: '#ffd700', img: "https://www.dropbox.com/scl/fi/mr8t9tfjctqdfg2pfs8sn/.png?rlkey=pxuectmzwuf46use0nqxvjswj&dl=1" },
 { id: '50', type: 'question', color: '#3f297e', img: "https://www.dropbox.com/scl/fi/vt2ghyl7uvx69hmaihznv/Pink-50-A-Coin.jpg?rlkey=a1cl8lkjiz94asr12q4zkxesq&dl=1" },
 { id: '100', type: 'question', color: '#ffd700', img: "https://www.dropbox.com/scl/fi/t5f1h0ahm9mx7ose5p3ns/Red-100-A-Coin.jpg?rlkey=atgu7im93v3jqsjjfrjlbtijx&dl=1" },
 { id: '500', type: 'question', color: '#3f297e',img: "https://www.dropbox.com/scl/fi/osn7rw08sza64cd61kzc9/Gold-500-A-Coin.jpg?rlkey=mek607jcimoteh85h5g7e00bz&dl=1" },
];

var RouletteWheel = function(el, items){
  this.$el = $(el);
  this.items = items || [];
  this._bis = false;
  this._angle = 0;
  this._index = 0;
  this.options = {
    angleOffset: -90
  }
}

_.extend(RouletteWheel.prototype, Backbone.Events);

RouletteWheel.prototype.spin = function(_index){
  
  var count = this.items.length;
  var delta = 360/count;
  var index = !isNaN(parseInt(_index))? parseInt(_index) : parseInt(Math.random()*count);
      
  var a = index * delta + ((this._bis)? 1440 : -1440);
  
  //a+=this.options.angleOffset;
  
  this._bis = !this._bis;
  this._angle = a;
  this._index = index;
  
  var $spinner = $(this.$el.find('.spinner'));
  
  var _onAnimationBegin = function(){
    this.$el.addClass('busy');
    this.trigger('spin:start',this);
  }
  
  var _onAnimationComplete = function(){
    this.$el.removeClass('busy');
    this.trigger('spin:end',this);
  }
  
  $spinner
  .velocity('stop')
  .velocity({
    rotateZ: a +'deg'
  },{
    //easing: [20, 7],
    //easing: [200, 20],
    easing: 'easeOutQuint',
    duration: 1000,
    begin: $.proxy(_onAnimationBegin,this),
    complete: $.proxy(_onAnimationComplete,this)
  });
  
}
  
RouletteWheel.prototype.render = function(){

 var $spinner = $(this.$el.find('.spinner'));
 var D = this.$el.width();
 var R = D*.5;

 var count = this.items.length;
 var delta = 360/count;

 for(var i=0; i<count; i++){

   var item = this.items[i];

 var content = item.img ? '<img src="' + item.img + '" style="max-width: 100%; height: auto;">' : '<span class="text">' + item.text + '</span>';
 console.log(item.text, item.img); // Добавьте эту строку в цикл в методе render
 console.log("Current item:", item);  // Для отладки
 

   

   var color = item.color;
   var text = item.text;
   var ikon = item.ikon;

   var html = [];
   html.push('<div class="item" ');
   html.push('data-index="'+i+'" ');
   html.push('data-type="'+item.type+'" ');
   html.push('>');
   html.push('<span class="label">');
   if(ikon)
     html.push('<i class="material-icons">'+ikon+'</i>');
   html.push('<span class="text">'+text+'</span>');
   html.push('</span>');
   html.push('</div>');

   var $item = $(html.join(''));

   var borderTopWidth = D + D*0.0025; //0.0025 extra :D
   var deltaInRadians = delta * Math.PI / 180;
   var borderRightWidth = D / ( 1/Math.tan(deltaInRadians) );

   var r = delta*(count-i) + this.options.angleOffset - delta*.5;

   $item.css({
     borderTopWidth: borderTopWidth,
     borderRightWidth: borderRightWidth,
     transform: 'scale(2) rotate('+ r +'deg)',
     borderTopColor: color
   });

   var textHeight = parseInt(((2*Math.PI*R)/count)*.5);

   $item.find('.label').css({
     //transform: 'translateX('+ (textHeight) +'px) translateY('+ (-1 * R) +'px) rotateZ('+ (90 + delta*.5) +'deg)',
     transform: 'translateY('+ (D*-.25) +'px) translateX('+ (textHeight*1.03) +'px) rotateZ('+ (90 + delta*.5) +'deg)',
     height: textHeight+'px',
     lineHeight: textHeight+'px',
     textIndent: (R*.1)+'px'
   });

   $spinner.append($item);

 }

 $spinner.css({
   fontSize: parseInt(R*0.06)+'px'
 })

 //this.renderMarker();


}



RouletteWheel.prototype.renderMarker = function(){
  
  var $markers = $(this.$el.find('.markers'));
  var D = this.$el.width();
  var R = D*.5;

  var count = this.items.length;
  var delta = 360/count;
      
  var borderTopWidth = D + D*0.0025; //0.0025 extra :D
  var deltaInRadians = delta * Math.PI / 180;
  var borderRightWidth = (D / ( 1/Math.tan(deltaInRadians) ));

  var i = 0;
  var $markerA = $('<div class="marker">');
  var $markerB = $('<div class="marker">');

  var rA = delta*(count-i-1) - delta*.5 + this.options.angleOffset;
  var rB = delta*(count-i+1) - delta*.5 + this.options.angleOffset;
    
  $markerA.css({
    borderTopWidth: borderTopWidth,
    borderRightWidth: borderRightWidth,
    transform: 'scale(2) rotate('+ rA +'deg)',
    borderTopColor: '#FFF'
  });
  $markerB.css({
    borderTopWidth: borderTopWidth,
    borderRightWidth: borderRightWidth,
    transform: 'scale(2) rotate('+ rB +'deg)',
    borderTopColor: '#FFF'
  })
  
  $markers.append($markerA);
  $markers.append($markerB);
  
}

RouletteWheel.prototype.bindEvents = function(){
  this.$el.find('.button').on('click', $.proxy(this.spin,this));
}


var spinner;
$(window).ready(function(){
  
  spinner = new RouletteWheel($('.roulette'), data);
  spinner.render();
  spinner.bindEvents();
  
  spinner.on('spin:start', function(r){ console.log('spin start!') });
  spinner.on('spin:end', function(r){ console.log('spin end! -->'+ r._index) });
  
})