ASP.NET Core 6 MVC中图片无法显示问题求助

1. 图片路径错误（核心问题） #

你在控制器中设置的UploadUrl包含了/wwwroot/，但ASP.NET Core的静态文件服务默认将wwwroot作为根目录，前端访问静态资源时不需要带上wwwroot。当前存储的ImageUrl是/wwwroot/Uploads/Product/xxx.jpg，但实际前端应该请求的是/Uploads/Product/xxx.jpg，否则服务器会返回404。

修复方法：
修改控制器中的UploadUrl：

string? UploadUrl = "/Uploads/Product/";

2. 视图HTML语法错误 #

你的img标签里的style属性多了一个多余的引号：

<img src="@V.ImageUrl" style="width:100px; height:100px;&quot;&gt;

这里的"是错误的，会导致HTML解析异常，影响图片渲染。

修复方法：
修正为正确的HTML：

<td> 
    <img src="@V.ImageUrl" style="width:100px; height:100px;">   
</td>

3. 文件流未正确释放（潜在问题） #

控制器中使用FileStream时没有用using语句包裹，可能导致文件写入不完整或者文件被锁定，后续无法读取。

修复方法：
用using自动释放文件流：

using (FileStream fs = new FileStream(Path.Combine
        (
            Directory.GetCurrentDirectory(),
            "wwwroot",
           "Uploads", "Product", newFileName
        ), FileMode.Create))
{
    model.Image.CopyTo(fs);
}

额外排查步骤 #

• 检查数据库中存储的ImageUrl是否正确，确认是去掉wwwroot后的路径。
• 手动查看wwwroot/Uploads/Product目录下是否存在对应的图片文件，确保文件确实上传成功。
• 打开浏览器开发者工具（F12），查看img标签的src属性，然后在新标签页打开该URL，确认是否返回图片或者404错误，以此验证路径是否正确。

内容的提问来源于stack exchange，提问作者b.g