Question

应用程序的架构很简单。用户可以上传存储在服务器上wwwroot外部的文件夹中的图像。图像的相对路径存储在数据库中。如标题所述，当通过控制器动作在卡体内检索图像然后进行扩展时，第一次出现怪异的卡顿/跳动/滞后。我认为这是b / c，在DOM准备就绪后加载图像，并且在扩展卡时，它必须重新计算高度（如果我错了，请纠正我）。我曾尝试删除填充/边距，但没有成功。这是代码：

查看：

<div class="card border-top-0">
    <div class="expand">
        <a href="#" class="text-primary float-right" data-toggle="collapse" data-target="#collapse_1" aria-expanded="false" aria-controls="collapse_1"><i class="fas fa-angle-double-down"></i></a>
    </div>
    <div class="card-header border-0">...</div>
    <div class="collapse" id="collapse_1">
        <div class="card-body border-0">
        @{
            string path = @Url.Action("RenderImage", "MyController", new { imagePath = Model.ImagePath });
        }
            <div class="row">
                <div class="col-12">
                    <h5 class="card-title mb-1">My Image</h5>
                    <div class="overflow-hidden" style="height: 200px; width: 200px;">
                        <a href=@path target="_blank">
                        <img class="img-thumbnail" src=@path alt="" />
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

控制器：

public IActionResult RenderImage(string imagePath)
{
    string filePath = Path.Combine(_hostingEnvironment.ContentRootPath, "Uploads", imagePath);

    FileStream stream = new FileStream(filePath, FileMode.Open);

    return File(stream, ImageHelper.GetContentType(imagePath));
}

如果我将path更改为某个图像网址，例如this，则它可以正常工作而不会变暗。如果我使用wwwroot中的图片，也没问题。

据我了解，该视图在服务器上呈现，然后发送到客户端。呈现页面时不应该执行string path = @Url.Action("RenderImage", "MyController", new { imagePath = Model.ImagePath });吗？与卡片视图进行交互之后，感觉就像是稍稍过了。我想念什么？我需要一些帮助来了解正在发生的事情以及如何解决此问题。

Bootstrap 4折叠图像仅在从控制器加载时才跳

0 个答案: