1

I've got a Kendo grid that displays images correctly on a column if the images are stored in my machine.

@(Html.Kendo().Grid<ProjectName.Models.SomeModel>()
.Name("grid")
.Columns(columns =>
{
    ...
    columns.Bound(c => c.Image).ClientTemplate("<img src='c:/pics/" + "#=Image#' alt='image' Title='image' height='24'/>").Title("Image");
})

So, this correctly displays images that are stored on my local hard drive, in the path c:/pics. But now I need to show images that are stored in a specific server instead of the c:/pics folder in my machine.

I have tried replacing this bit here:

src='c:/pics/"

with these options:

src='\\999.99.99.999\ProjectName\Images\'
src='\\\\999.99.99.999\\ProjectName\\Images\\'
src='http://999.99.99.999/ProjectName/Images/'
src='999.99.99.999/ProjectName/Images/'

But none of them works.

*Note that the 999.99.99.999 is a dummy, I insert the real IP there.

How can I set a source for the image that's an IP address of another machine?

EDIT:

If I have an image tag in any other part of the View, it works fine, like this:

<img src="\\999.99.99.999\ProjectName\Images\somepic.jpg" alt="whatever" />

But inside the ClientTemplate for the column in the grid I get errors with the backslashes, that's why I tried the double backslashes too.

chiapa
  • 4,362
  • 11
  • 66
  • 106

1 Answers1

1

Have you tried to pull the javascript out something like this may work for you:

From this: 

columns.Bound(c => c.Image).ClientTemplate("<img src='c:/pics/" + "#=Image#' alt='image' Title='image' height='24'/>").Title("Image");

To This: 

columns.Bound(c => c.Image).ClientTemplate("#=GetMyImage(data.Image)#").Title("Image");

Then have a javascript function build up the image for you. 

<script>

function GetMyImage(image)
{
 var returnString = 'No Image Found'; 

//just checking to see if we have a name for the image 
if(image !== null && image.length > 0)
{
  returnString = '<img src="{Your server details here}\" + image + '" title="image" height="24" alt="image"/>;

return returnString;  
}
}


</script>

This is usually what I do if I want to do something a bit more creative with the client templating for Kendo grids.

David Shorthose
  • 4,489
  • 2
  • 13
  • 12
  • OK, I've put this: `returnString = '\"image\"/';` and it works fine on IE. However, the images aren't shown on Firefox or Chrome. Can you help? By the way: `+1` now and mark as correct answer soon! – chiapa Oct 03 '14 at 14:23
  • This may be something to do with the inner security of those browsers what happens if you try and use relative urls eg just doing ..\Images\{image name here} This assumes the images are stored in the same website – David Shorthose Oct 03 '14 at 16:19
  • It'w weird because it works only in IE: doesn't work with Chrome, Firefox or Opera – chiapa Oct 03 '14 at 16:24
  • Just as a thought have you tried to disable/ clear the cache of the browsers just incase it has tried to cache the image. Also in the time line for chrome does it try to fetch the images? – David Shorthose Oct 03 '14 at 16:44
  • Yeah, I tried that. I think it may have to do with the relative urls you mentioned (that I'm not using!) because when I type the image address in the browser address box it displays the image, in any browser. As I said, my img element is: ``, what should it be if using a relative path? – chiapa Oct 03 '14 at 16:51
  • This depends on where your images folder is and where this is in relation to the page "route" you are using. this SO should help you: http://stackoverflow.com/questions/3391510/asp-mvc-friendly-urls-and-relative-path-images – David Shorthose Oct 03 '14 at 16:56