无法加载图片

时间:2019-07-18 12:21:42

标签: javascript html css razor .net-core

我试图将图像路径值保留在一个变量中,并将其传递给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”,即可正常工作。

由于我需要加载动态图像,因此需要动态传递此值。

1 个答案:

答案 0 :(得分:0)

您需要使用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);    
  }

要动态获取网址,您可以在项目上创建自定义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">