将相对图像 url 从 asp.net 传递到 Reactjs 组件

Question

我应该如何将相对 url 从 asp.net mvc 5 项目传递到我的 ReactJs 组件？

样本URL：

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

示例组件：

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);
}

});

从服务器我使用 Reactjs.Net 因此我的 html

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

Answer 1

使用Url.Content。您可以直接在您的视图中调用它：

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

或者您可以在控制器中调用 Url.Content，然后将完整的 URL 传递给视图。

将相对图像 url 从 asp.net 传递到 Reactjs 组件

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

asp.net-mvc-5

reactjs

relative-path

reactjs.net