AspNetCore get path to wwwroot in TagHelper

Question

I try to create a TagHelper that checks for the existence of an image and if it is not there replaces the path to a default image.

Unfortunately I have problems to map the "~" symbol in my tag helper.

For example. My src of the image contains "~\images\image1.png". Now I want to check for existence of this file and if not replace it by another one from an attribute of the tag. I am stuck at mapping the "~" to wwwroot of my application.

This is what I have actually:

[HtmlTargetElement("img", TagStructure = TagStructure.WithoutEndTag)]
public class ImageTagHelper : TagHelper
{
    public ImageTagHelper(IHostingEnvironment environment)
    {
        this._env = environment;
    }

    private IHostingEnvironment _env;

    public string DefaultImageSrc { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
    //    urlHelper.ActionContext.HttpContext.
    //var env = ViewContext.HttpContext.ApplicationServices.GetService(typeof(IHostingEnvironment)) as IHostingEnvironment;

        string imgPath = context.AllAttributes["src"].Value.ToString();

        if (!File.Exists(_env.WebRootPath + imgPath)) {
            output.Attributes.SetAttribute("src", _env.WebRootPath + DefaultImageSrc);
        }
    }

}

Answer 1

You should take a constructor dependency on IUrlHelperFactor and IActionContextAccessor which will enable you to get an IUrlHelper that can resolve urls from wwwroot with the "~/" syntax

public ImageTagHelper(
    IUrlHelperFactory urlHelperFactory,
    IActionContextAccessor actionContextAccesor,)
{
    this.urlHelperFactory = urlHelperFactory;
    this.actionContextAccesor = actionContextAccesor;
}

private IUrlHelperFactory urlHelperFactory;
private IActionContextAccessor actionContextAccesor;

public override void Process(TagHelperContext context, TagHelperOutput output)
{
    var urlHelper = urlHelperFactory.GetUrlHelper(actionContextAccesor.ActionContext);
    var myUrl = urlHelper.Content("~/somefilebelowwwwroot");
    ...
}

you can see I'm doing that in my PagerTagHelper

Answer 2

It needs an addition in the ConfigureServices method in the Startup.cs

You need to add the following lines:

        services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
        services.AddSingleton<IActionContextAccessor, ActionContextAccessor>();

And then this works:

   [HtmlTargetElement("img", TagStructure = TagStructure.WithoutEndTag)]
    public class ImageTagHelper : TagHelper
    {
        public ImageTagHelper(IUrlHelperFactory urlHelperFactory,
                              IActionContextAccessor actionContextAccessor,
                              IHostingEnvironment environment)
        {
            _urlHelperFactory = urlHelperFactory;
            _actionContextAccessor = actionContextAccessor;
            _env = environment;
        }

        private IUrlHelperFactory _urlHelperFactory;
        private IActionContextAccessor _actionContextAccessor;

        private IHostingEnvironment _env;

        public string DefaultImageSrc { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            string imgPath = context.AllAttributes["src"].Value.ToString();

            IUrlHelper urlHelper = _urlHelperFactory.GetUrlHelper(_actionContextAccessor.ActionContext);

            if (!imgPath.StartsWith("data:"))
            {
                if (!File.Exists(_env.WebRootPath + urlHelper.Content(imgPath)))
                {
                    if (DefaultImageSrc != null)
                    {
                        output.Attributes.SetAttribute("src", urlHelper.Content(DefaultImageSrc));
                    }
                }
            }
        }

    }