基于模型元素动态渲染图像

Question

我有一个 View 模型，其中包含一个字符串列表，我想使用这些字符串将一些图像动态呈现到剃刀视图。

public List<string> States { get; set; } = new List<string>() { "ACT", "NSW", "NT", "QLD", "SA", "TAS", "VIC", "WA" };

这就是我正在做的：

@foreach (var state in Model.States)
  {
    var stateImage = $"~/Images/{state}.jpg";

     <div class="col-lg-4 col-xl-4 col-md-6 pb-4 card-deck">
            <div class="card">
                   <img src="@stateImage" class="card-img" />
            </div>
     </div>
}

我遇到的问题是图像无法渲染。如果我硬编码路径（“~/Images/ACT.jpg” 例如）然后它完美地工作并且图像加载，如果我通过调试器观察它，或者甚至只是将它显示在一个 div 上，那么它显示的内容与我正在硬编码的内容完全相同，但它仍然不渲染图像，我不知道为什么。

Answer 1

~ 需要以与代码相同的方式进行评估。如果将其分配给字符串变量，则无法将其解析为 Razor 语法。在您的示例中，无论如何都不需要使用字符串变量。

试试这个：

@foreach (var state in Model.States)
{
     <div class="col-lg-4 col-xl-4 col-md-6 pb-4 card-deck">
            <div class="card">
                   <img src="~/Images/@stateImage" class="card-img" />
            </div>
     </div>
}