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

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>
}