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

Я пытаюсь сохранить значение пути к изображению в переменной и передать его свойству 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», все работает нормально.

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


javascript html css .net-core razor
person Nityananda Das    schedule 18.07.2019    source источник
comment
вызовите метод в src изображения, например src=‹%=getImagePath()%›, и верните путь к изображению из указанного метода js, или перейдите к Url Content , или для динамического изменения scr просто перейдите к $(#imageid).src= ваш путь к изображению;   -  person Arunprasanth K V    schedule 18.07.2019

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно использовать Url.Content для правильного перевода ~/

  @{
    string layoutImage1 = "FORMULE1UNTIL3_MOBIELETAFEL1_A_SIDE.jpg";
    string layoutImage2 = "FORMULE1UNTIL3_MOBIELETAFEL1_B_SIDE.jpg";
    string imageSource1 = Url.Content("~/images/TafelLayouts/" + layoutImage1);
    string imageSource2 = Url.Content("~/images/TafelLayouts/" + layoutImage2);    
  }

Чтобы динамически получать URL-адрес, вы можете создать собственный UrlHelper в своем проекте.

namespace project.MyCustomExtensions

public static class UrlHelperExtensions
  {
      public static string ImageUrl(this UrlHelper url, string param1, string param2)
      {
          // your logic goes here 
      }
  }

Они называют это так

@using project.MyCustomExtensions // using on top of your view

// your html code

<img class="" id="imgLayout" src="@Url.ImageUrl("someParamValue", "otherParamValue")" alt="@layoutImage2">
person Cleiton Tortato    schedule 18.07.2019