asp.net-mvc-5 - Pass a relative image url to a Reactjs component from asp.net

Question

How should i pass the relative url to my ReactJs component from a asp.net mvc 5 project?

Sample URL:

<img src="~/Content/themes/base/images/DocumentBase.png" />

sample component:

var ImageViewer = React.createClass({

render: function () {
    return (
        <div onClick={this.clickHandler}>
            <img src={this.props.src} />
        </div>
        );
},

clickHandler: function () {

    this.props.onClick(this.props.ref);
}

});

From server I am using Reactjs.Net therefore my html

   <div class="list-group">
             @Html.React("ImageViewer", new
            {
                src = imgUrl
            })
        </div>

Answer 1

Use Url.Content. You could call it in your view directly:

@Html.React("ImageViewer", new
{
    src = Url.Content(imgUrl)
})

Or you could call Url.Content in your controller, and pass the full URL to the view.