无法通过模型传输数据使用局部视图以模态加载图像

Posted 2023-05-08

【中文标题】无法通过模型传输数据使用局部视图以模态加载图像

【英文标题】：Can't load image in modal using Partial View by transporting data by Model

【发布时间】：2021-03-18 02:29:40

【问题描述】：

我想使用局部视图从 wwwroot 文件夹加载带有图像的模式。 它适用于将图像源显式设置为图像目录。它不适用于使用具有保存图像路径的属性的模型。

我检查了创建并保存到模型的字符串。对我来说它看起来不错。

发送到局部视图的模型：

public class ImagePath
    
        public string Path  get; set; 
    

局部视图：

//that image is displayed
<img class="img-fluid" src="~/images/Equipment/8711-rys.jpg"  />

//that image isn't displayed
<img class="img-fluid" src="@Model.Path"  />

获取调用并返回部分视图的函数：

public PartialViewResult OnGetModalImage(string path)
        
            var pathToImage = "~/images/Equipment" + path;
            ImagePath = new ImagePath
            
                Path = pathToImage
            ;
            return Partial("_ModalImage", ImagePath);
        

查看代码：

<script type="text/javascript">
$(function () 
            $('#myInput').on('click', function () 
                $('.modal-body').load(`/treeview/modalimage?path=$'/8711-rys.jpg'`);
            );
        )
</script>

<div id="imgModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Nazwa narzedzia</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

【参考方案1】：

它不适用于使用具有保存图像路径的属性的模型。

如果您在浏览器端查看了<img> 标签的渲染html 源代码，您会发现它如下所示。

要使第二个<img> 标签渲染得很好，您可以使用@Url.Content(Model.Path) 将虚拟（相对，以~/ 开头）路径转换为应用程序绝对路径。

<img class="img-fluid" src="@Url.Content(Model.Path)"  />

另一种方法是将pathToImage 设置为"/images/Equipment" + path，如下所示。

var pathToImage = "/images/Equipment" + path;
ImagePath = new ImagePath

    Path = pathToImage
;

【讨论】：

谢谢！这很有帮助。现在我明白我做错了什么。