Nityananda Das Ответов: 1

Не удается загрузить изображения

Я пытаюсь сохранить значение пути изображения в переменной и передать его в свойство img src, но оно не работает.

Ниже приведен мой код...

<div class="js-container-assortmentlist">
  @{
    string layoutImage1 = "FORMULE1UNTIL3_MOBIELETAFEL1_A_SIDE.jpg";
    string layoutImage2 = "FORMULE1UNTIL3_MOBIELETAFEL1_B_SIDE.jpg";
    string imageSource1 = "~/images/TafelLayouts/" + layoutImage1;
    string imageSource2 = "~/images/TafelLayouts/" + layoutImage2;    
  }

  <div style="width:30%; margin-left: auto;margin-right: auto;display:block " id="layoutImage1">
    <img class="" id="imgLayout" src="@imageSource1" alt="@layoutImage1">
  </div>
  <div style="width:30%; margin-left: auto;margin-right: auto;display:none " id="layoutImage2">
    <img class="" id="imgLayout" src="@imageSource2" alt="@layoutImage2">
  </div>
  <br />
</div>


Что я уже пробовал:

Когда я предоставляю значение для img src напрямую, например "~/images/TafelLayouts/FORMULE1UNTIL3_MOBIELETAFEL1_A_SIDE.jpg-все работает нормально.

Поскольку мне нужно загружать динамические изображения , мне нужно передавать это значение динамически.

MadMyche

Как выглядит визуализированный HTML-код? Что показывает отладчик браузеров для этих изображений на вкладке Сеть?

ZurdoDev

То, что он сказал. ^

1 Ответов

Рейтинг:
9

Anurag Gandhi

Привет,
Проблема заключается в следующем: если вы помещаете полную переменную в качестве значения атрибута, вы должны решить полный URL самостоятельно в imageSource1 и imageSource2.

В противном случае вы можете сделать обходной путь (обратите внимание, что "~/" перемещается в значение атрибута):

<div class="js-container-assortmentlist">
  @{
    string layoutImage1 = "FORMULE1UNTIL3_MOBIELETAFEL1_A_SIDE.jpg";
    string layoutImage2 = "FORMULE1UNTIL3_MOBIELETAFEL1_B_SIDE.jpg";
    string imageSource1 = "images/TafelLayouts/" + layoutImage1;
    string imageSource2 = "images/TafelLayouts/" + layoutImage2;    
  }

  <div style="width:30%; margin-left: auto;margin-right: auto;display:block " id="layoutImage1">
    <img class="" id="imgLayout" src="~/@imageSource1" alt="@layoutImage1">
  </div>
  <div style="width:30%; margin-left: auto;margin-right: auto;display:none " id="layoutImage2">
    <img class="" id="imgLayout" src="~/@imageSource2" alt="@layoutImage2">
  </div>
  <br />
</div>

Nityananda Das

Большое спасибо, Анураг...