Open image in a new window using Razor and javascript

Question

I'm trying to open in a new window a new full size image from each one. I'm using this code:

<script type="text/javascript">
function openImage(imageUrl) {
    window.open(imageUrl);
}

@foreach (var image in Model.Images)
{
        <img src="@Url.Action("Thumbnail", "Done", new { width = 150, height = 150, file = @imagen.filename })" alt="@imagen.filename" onclick="openImage('@Url.Content(ViewBag.Path + @imagen.filename)')" />
}

But using this when I click on a image it can't open anything.

Can you help me with this issue?

Thank you in advanced

EDITED the function openImage due to wrong code

Any errors in JS console? Please debug what value of `imageUrl` comes to `openImage`. — phts, Jun 19 '15 at 10:19
BTW `imageUrl` argument and `imgUrl` in `window.open`. Is this cause of your problem? — phts, Jun 19 '15 at 10:27

score 1 · Accepted Answer · answered Jun 29 '15 at 21:58

1

The solution is to get the url of the directory which is saved the images in this way: string url = Url.Content("~/Images");

answered Jun 29 '15 at 21:58

Levimatt

453
1
11
28

score 0 · Answer 2 · answered Jun 19 '15 at 10:57

0

There's a number of mismatched variable names in the question

imageUrl/imgUrl
image/@imagen

I'll assume these are typos for the question.

Could be that ViewBag.Path is missing a / at the end. To get around this, don't concatenate (+) url parts, but use System.IO.Path.Combine, as in:

@Url.Content(Systemm.IO.Path.Combine(ViewBag.Path, image.filename))

Rather than using javascript onclick, you could change your loop to create simple links to new windows/tabs (these would also be navigable via the keyboard)

@foreach (var image in Model.Images)
{
    <a target="_blank" href='@Url.Content(ViewBag.Path + @image.filename)'>
        <img src="@Url.Action("Thumbnail", "Done", new { width = 150, height = 150 })" alt="@image.filename" />
    </a>
}

If this doesn't work (and I'm expecting it won't for you), please provide details for:

alert('@ViewBag.Path')

function openImage(imageUrl) {
    alert(imageUrl);
}

answered Jun 19 '15 at 10:57

freedomn-m

27,664
8
35
57

Doing the foreach code you put, images are displayed but when I click on them they don't open. The path is trying to open is something like this: file:///c:/users/xxx/documents/visual%20studio%202013/Projects/ProjectOne/ProjectFolder/Images/filename.jpg. The path exists, and when I copy and paste that path in a browser it is displayed, but in the normal runtime of the application it can't be opened. – Levimatt Jun 27 '15 at 10:21
That explains the bit of info you were missing `viewbag.path`. The path should not be `file://` anything, it should be `http://yoursite/subpath/image`. Can you confirm the value of `@ViewBag.Path' and the alert I suggested. – freedomn-m Jun 27 '15 at 19:16
@ViewBag.Path is returning file:// format. In the controller I use this code to pass the viewbag to the view: ViewBag.Path = Server.MapPath("~/Images/"); – Levimatt Jun 29 '15 at 21:34
http://stackoverflow.com/questions/4763863/anchor-link-to-local-file-a-href-file-pathdead-link-a-not-working – freedomn-m Jun 29 '15 at 23:54

Open image in a new window using Razor and javascript

2 Answers2