How to remove tilde (~) from rendered image URL's with Razor?

2
votes

In Umbraco (4.7.0), I'm using a small Razor script to render images from an image property but even though this method is receiving the correct information, the images won't display; a tilde is always generated in front of the URL but this is actually stopping the image from displaying. Is there a way (or perhaps an alternative method of rendering media altogether) to remove the tilde?

This is essentially what's in the razor script, with primaryImage being the image property:

<img class="primary-image" src="@Model.MediaById(Model.primaryImage).umbracoFile" alt="@Model.MediaById(Model.primaryImage).Name">

This snippet actually sits within a foreach loop, to render an image if the property has one.

2
razorumbraco
Wrap it in @Url.Content() possibly so it resolves to a site-relative URL? e.g. src="@Url.Content(Model.MediaById(Model.primaryImage).ubracoFile)" (As long as that's what's generating the ~/Path/to/File.jpg value.) – Brad Christie
Hey Brad, thanks for the answer! Sounds just what I need but I'm receiving the error "error CS0103: The name 'Url' does not exist in the current context". Any ideas? – mmmoustache
If it's not already listed in web.config <pages><namespaces> as an entry, you may need to add @using System.Web.Mvc to the top of your page to see that method. – Brad Christie
@BradChristie are you going to make your comment an answer - I know you don't need the rep but I want to upvote your comments – amelvin

2 Answers

4
votes

Assuming the code that's generating your ~/Path/To/Image.jpg is:

@Model.MediaById(Model.primaryImage).umbracoFile

You can wrap the result in a call to Url.Content which will translate the result to a site-relative path. For example:

@* Assuming that Model.MediaById(Model.primaryImage).umbracoFile results in
   A string similar to ~/images/foo.jpg, the following will work: *@
<img src="@Url.Content(Model.MediaById(Model.primaryImage).umbracoFile)" ... />

However, I would recommend reducing the calls to MediaById and store the result (while also checking against a null reference--just in case) with something like:

@{
  var media = Model.MediaById(Model.primaryImage);

  if (media != null){
    <img src="@Url.Content(media.umbracoFile)" ... />
  }
}
0
votes

If you used a code block you could get the media image as a DynamicMedia object, something like the following (not tested it yet) - also the NiceUrl attribute of the media object will be a non-tilde url:

        if(Model.HasProperty("primaryImage") && !String.IsNullOrEmpty(Model.primaryImage.ToString()))
        {
          int mediaId = Convert.ToInt32(Model.getProperty("primaryImage").Value.ToString());                                                                                      
          var mediaNode = new umbraco.cms.businesslogic.media.Media(mediaId);                                                                                           
          string mediaUrl = mediaNode.getProperty("umbracoFile").Value.ToString();
          string mediaName = mediaNode.Text;

            <img src="@mediaUrl" alt="@mediaName" />
        }

EDIT

Just tried something very similar to your code and it worked fine, so it could be a config issue:

@{
    var articleFirst = Model.umbNewsArticle.Take(1);
    var article1 = articleFirst.FirstOrDefault();

<img src="@article1.MediaById(article1.feature1Image).umbracoFile" alt="@article1.MediaById(article1.feature1Image).Text" height="63" width="78" />

}