使用img src检索动态服务器数据

Question

我目前正在使用ajax jquery用动态值填充img src。由于图像无论如何都要去服务器，我想删掉代码的jquery部分

我目前拥有的

Javascript（这是我想丢弃的代码）

var Onload= function () {
    $.each($('.image'), function (x, item) {
        $.ajax({
            url: '/MyController/MyAction/?imageName=' + $(item).attr('data-image-name'),
            type: 'GET',
            dataType: 'html',
            success: function (data) {
                $(item).attr('src', data);
            },
            error: function (jqXHR, textStatus, errorThrown) {
            }
        });
    });
};

服务器端代码

public string MyAction(string imageName)
{
    return imageUrl = _myService.GetImageUrl(imageName);
} 

HTML

@foreach(var i in Model)
{
    <img src="" class="image" data-image-name="@i.Name"/>//this is current html
    //<img src="/MyController/Myaction/imageName" + @i.Name />
    //i am trying to get something like second img tag
    //but if i do this it populates with the controller/action url, 
    //not the result of the action method url
}

我知道视图模型之类的东西。我不想找到一个答案，说"把这些信息放进你的模型/视图模型中。"

Answer 1

我看到了几个选项：

-把它放在ViewModel中（老实说，这是我认为最干净的选项）

-这样做：

@foreach(var i in Model)
{       
    <img src="@_myService.GetImageUrl(@i.Name)"/>
}

-创建一个返回图像而不是url的操作。我认为这可能最接近你想要的：

public ActionResult MyAction(string imageName)
{
    var path= Server.MapPath(_myService.GetImageUrl(imageName));
    return base.File(path, "image/jpeg");
}
<img src="/MyController/Myaction/?imageName=@i.Name" />