ASP.NET MVC CSHTML中动态拼接图片路径加载图片问题

嘿，作为ASP.NET MVC新手遇到这种小问题太正常啦！其实你卡壳的点就是Razor语法的正确使用方式，咱们来快速搞定它：

你之前尝试的"~/Content/Images/" + @c.ImageFileName写法不符合Razor的语法规则，Razor需要把动态变量直接嵌入到属性值里，或者用表达式包裹起来。下面给你几种可行的解决方案：

方案1：直接嵌入变量到路径中 #

这是最简单的写法，Razor会自动解析@c.ImageFileName并把它的值拼接到路径里：

<img src="~/Content/Images/@c.ImageFileName" alt="@c.CatName" style="width:64px;height:48px;" />

注意这里给alt属性加上了双引号，这是HTML的规范写法，能避免当CatName包含特殊字符时出现渲染问题。

方案2：使用字符串插值+Razor表达式 #

如果你的路径需要更灵活的拼接（比如加上子文件夹判断、动态前缀等），可以用C#的字符串插值，再用@()把整个表达式包裹起来，让Razor正确解析：

<img src="@($"~/Content/Images/{c.ImageFileName}")" alt="@c.CatName" style="width:64px;height:48px;" />

这种方式扩展性更强，后续如果要调整路径结构，直接修改插值字符串就行。

方案3：提前在代码块中构建路径 #

如果路径需要额外的逻辑处理（比如判断文件是否存在、根据环境切换路径等），可以先在Razor代码块里构建好完整路径，再引用：

@{
    // 这里可以加额外逻辑，比如判断ImageFileName是否为空
    var fullImagePath = string.IsNullOrEmpty(c.ImageFileName) 
        ? "~/Content/Images/default.jpg" 
        : $"~/Content/Images/{c.ImageFileName}";
}
<img src="@fullImagePath" alt="@c.CatName" style="width:64px;height:48px;" />

最后要确认一下：@c.ImageFileName的值要和你之前硬编码的文件名完全一致（比如如果之前是Dining/Dining.jpg，那这个变量的值也得包含子文件夹部分），这样拼接后的路径才会正确指向图片文件。

内容的提问来源于stack exchange，提问作者C.Math