javascript - 无法加载图片

Question

我试图将图像路径值保存在一个变量中并将其传递给 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>

当我直接像“~/images/TafelLayouts/FORMULE1UNTIL3_MOBIELETAFEL1_A_SIDE.jpg”一样为 img src 提供值时，它工作正常。

因为我需要加载动态图片，所以我需要动态传递这个值。

Answer 1

您需要使用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">