嘿，这个场景我太熟了！其实核心就是利用EF Core的导航属性把产品和图片的数据关联起来，一次性查出来，然后在页面上配对展示就行。我给你一步步拆解，保证你能搞定：

首先得确保Product和Image表之间的外键与导航属性配置到位，这是关联查询的基础。一般来说一个产品对应多张图片（一对多关系），你的模型应该大概是这样的：

// Product 模型
public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
    // 其他产品属性...

    // 导航属性：关联的图片集合
    public ICollection<Image> Images { get; set; } = new List<Image>();
}

// Image 模型
public class Image
{
    public int Id { get; set; }
    public string ImagePath { get; set; } // 如果是存服务器上的图片路径
    // 要是你把图片二进制数据存在数据库，就换成这个：public byte[] ImageData { get; set; }
    public string ContentType { get; set; } // 存二进制数据时需要这个字段记录图片类型

    // 外键：关联的产品ID
    public int ProductId { get; set; }
    // 导航属性：对应的产品
    public Product Product { get; set; }
}

如果是一对一的场景（一个产品只有一张图），把ICollection<Image>改成单个Image对象就行。

和你之前读取Product表数据的思路差不多，但要加上EF Core的Include方法，这样查询出来的每个Product对象都会自动带上对应的Images集合。

比如你的Index.cshtml.cs里的OnGet方法可以改成这样：

public class IndexModel : PageModel
{
    private readonly YourDbContext _context;

    public IndexModel(YourDbContext context)
    {
        _context = context;
    }

    public IList<Product> Products { get; set; }

    public async Task OnGetAsync()
    {
        // 关键就是这个Include，把关联的图片数据一起加载进来
        Products = await _context.Products
            .Include(p => p.Images)
            .ToListAsync();
    }
}

记得要引用Microsoft.EntityFrameworkCore命名空间，不然Include方法会找不到哦。

现在后端已经把产品和对应的图片一起传过来了，接下来就是在.cshtml里遍历产品，每个产品下面展示它的图片。

情况1：图片存在服务器路径（推荐） #

如果你的Image表存的是服务器上的相对路径（比如/uploads/products/123.jpg），前端可以这么写：

@page
@model IndexModel

<h1>产品列表</h1>

<div class="row">
    @foreach (var product in Model.Products)
    {
        <div class="col-md-4 mb-4">
            <div class="card">
                <!-- 展示产品的第一张图，没有的话显示默认图 -->
                @if (product.Images.Any())
                {
                    <img src="@product.Images.First().ImagePath" class="card-img-top" alt="@product.Name">
                }
                else
                {
                    <img src="/images/default-product.jpg" class="card-img-top" alt="默认产品图">
                }
                <div class="card-body">
                    <h5 class="card-title">@product.Name</h5>
                    <p class="card-text">价格：@product.Price.ToString("C")</p>
                    <!-- 其他产品信息按需添加 -->
                </div>
            </div>
        </div>
    }
</div>

情况2：图片二进制数据存在数据库 #

如果是把图片存在数据库的字节数组里，就得单独写个页面来返回图片流：

先创建ImageDisplay.cshtml页面，代码如下：

// ImageDisplay.cshtml.cs
public class ImageDisplayModel : PageModel
{
    private readonly YourDbContext _context;

    public ImageDisplayModel(YourDbContext context)
    {
        _context = context;
    }

    public async Task<IActionResult> OnGetAsync(int id)
    {
        var image = await _context.Images.FindAsync(id);
        if (image == null)
        {
            return NotFound();
        }
        // 返回图片流
        return File(image.ImageData, image.ContentType);
    }
}

然后前端展示的时候调用这个页面的地址：

@if (product.Images.Any())
{
    <img src="/ImageDisplay?id=@product.Images.First().Id" class="card-img-top" alt="@product.Name">
}
else
{
    <img src="/images/default-product.jpg" class="card-img-top" alt="默认产品图">
}

• 可以给Image表加个IsPrimary字段，标记哪张是产品的主图，这样展示的时候直接取product.Images.FirstOrDefault(img => img.IsPrimary)，比用First()更灵活。
• 如果之前没配置模型关联，记得要迁移数据库，确保Image表的ProductId外键存在。
• 存路径的话，要保证上传的路径正确，并且服务器对应文件夹有读写权限。

内容的提问来源于stack exchange，提问作者Hdot