时间戳

首页 > 解决方案 > 无法加载图片

javascript - 无法加载图片

问题描述

我试图将图像路径值保存在变量中并将其传递给 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 提供值时，它工作正常。

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

标签： javascripthtmlcssrazor.net-core

解决方案

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

推荐阅读