Display Images with Spaces

Question

I am working on an MVC site that feeds from an existing desktop application with a really horrible database, rant over ! I have image files in the local file system that are displayed for each property, some of the filenames have spaces and dont display properly.

if (imageFound != null)
{
    string fileName = item.PropertyImages.Where(i => i.ImagePosition == 1).FirstOrDefault().FileName;
    fileName = System.Web.HttpUtility.UrlEncode(fileName);
    item.MainDisplayImage = @"images/" + item.PropertyID + "/" + fileName;            
 }
 else
 {
      item.MainDisplayImage = "images/properties/lx0001/thumb/01-image.jpg";
 }

The view looks like

<a href="propertydetail.html">
    <img src=@item.MainDisplayImage.ToString() title="207 Joe Bloggs Avenue" alt="207 Joe Bloggs Avenue" width="210" height="150" border="0" />
</a>

It renders in the browser like images/AMPM0263/2013-09-17+11.22.42.jpg, any ideas, help would be greatly appreciated, thanks.

Hi, an example filename would be 2013-09-17 11.22.42.jpg – Simon Nov 16 '13 at 11:53 — Simon, Nov 16 '13 at 11:53

Marco · Accepted Answer · 2013-11-16T12:29:39.430

0

I have just tryied this in Linqpad and this line is causing the replacement of your whitespace with +:

fileName = System.Web.HttpUtility.UrlEncode(fileName);

If you comment this line out, the filename should be correct. If you do not want to do this, you can manually replace the + out again with:

fileName = System.Web.HttpUtility.UrlEncode(fileName).Replace("+", " ");

Normally you would call Uri.EscapeDataString() which replaces whitespaces with %20.

edited Nov 16 '13 at 12:29

answered Nov 16 '13 at 12:14

Marco

22,856
9
75
124

The space in URL would be invalid, even if it might technically work if the SRC attribute value was enclosed in quotes. It should be encoded to %20. As it isn't the browser would most likely assume you had added an unknown boolean attribute 11.22.42.jpg – pwdst Nov 16 '13 at 12:22
Hi, that sorted the problem, thanks so much, also had not surrounded src in quotes in view. – Simon Nov 16 '13 at 12:25
@pwdst I have tested both whitespace and %20 in a dummy html file and both solutions worked. So I guess I'll let both my answers as is and live with your downvote. – Marco Nov 16 '13 at 12:28
The key point was the issue around having spaces in a **unquoted** attribute value. With regard to the validity of spaces, these are technically invalid although I did state it may well work. See http://stackoverflow.com/questions/497908/are-urls-allowed-to-have-a-space-in-them. Generally the fact that nonstandard behaviour still seems to work when tested by you should not be relied upon, especially as future standards may demand this behaviour in changed to accommodate changes or ensure consistency. – pwdst Nov 16 '13 at 12:44
I did not realize the unquoted Uri. That indeed is a valid point – Marco Nov 16 '13 at 12:46

score 0 · Answer 2 · answered Nov 16 '13 at 12:29

0

Avoid using HttpUtility.UrlEncode any variations. It can always cause issues with ASP.NET file paths and not preferred. Alternatively you can use Uri.EscapeDataString

http://msdn.microsoft.com/en-us/library/system.uri.escapeuristring(v=vs.110).aspx

answered Nov 16 '13 at 12:29

Spock

7,009
1
41
60

Display Images with Spaces

2 Answers2