retrieve dynamic server data with img src

Question

I am currently using ajax jquery to populate an img src with a dynamic value. Since the image is going to the server anyway i would like to cut out the jquery portion of the code

What I currently have

Javascript (this is the code i want to trash)

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) {

            }
        });
    });
};

Server side code

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
}

I know about viewmodels and things of that sort. I am not looking for an answer that says, "put this info into your model/viewmodel."

possible duplicate of [Using a .NET MVC Controller Action as the Source for an HTML ](http://stackoverflow.com/questions/3045952/using-a-net-mvc-controller-action-as-the-source-for-an-html-img) — EkoostikMartin, Jul 15 '13 at 18:24

Jason P · Answer 1 · 2013-07-15T19:34:54.730

0

I see a couple options:

-Put it in the ViewModel (honestly, the cleanest option in my opinion)

-Do something like this:

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

-Create an action that returns the image, not the url. I think that may be closest to what you're looking for:

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" />

edited Jul 15 '13 at 19:34

answered Jul 15 '13 at 18:30

Jason P

26,984
3
31
45

I did the second solution. I get a 500 error. Looking the at the preview tab in network it has following error message: 'myimage.jpeg' is not a valid virtual path. If i copy and past the url in a new browser window it show the image correctly – dan_vitch Jul 15 '13 at 19:03
the type is text/html. I think that's causing the issue. It should be image/ – dan_vitch Jul 15 '13 at 19:30
Hm, I noticed that I should have used `@i.Name`, and of course `_myService` probably wasn't initially defined, but I assume you took care of that. When you view the source of the page, what is the src that is rendered? – Jason P Jul 15 '13 at 19:35
src="/MyController/MyAction/?imageName=Image1" – dan_vitch Jul 15 '13 at 19:43
Ah, so maybe `_myService.GetImageUrl(imageName)` is returning `myimage.jpeg` which `Server.MapPath()` doesn't like. You might need to refactor a bit to get the virtual path of the image, not just the image name. – Jason P Jul 15 '13 at 19:59
the method returns the fully qualified url. – dan_vitch Jul 15 '13 at 20:26

retrieve dynamic server data with img src

1 Answers1