Получение изображения из контроллера и отображение изображения на веб-странице с помощью React JS. Как мне разобрать объект Image, отправленный как Promise? - PullRequest
0 голосов
/ 05 сентября 2018

Ниже приведен мой код контроллера, который отправляет объект изображения: публичная функция getImage ($ id) {

    $banner = Banner::find($id);

    $image_path = public_path("storage\\".$banner->filename);

    $image_obj = \Image::make($image_path)->response();
    Log::info("image_path".$image_obj);
    return $image_obj;  
}

Вот что получится, когда я сделаю Console.log баннер [объект Promise]

Но он не отображает изображение в браузере, вместо этого я получаю src как пустое Код React, который получает изображение, выглядит следующим образом getBanner () {

    let uri = AccelGlobalSettings.url ;

    //get slides
    var request = this.getRequest(uri+ '/api/image/1','GET',null);
    fetch(request)
    .then(response => {

        return response.json();
    })
    .then(banner => {

        this.setState({ banner:banner });
    });

}
....
render(){
    let uri = AccelGlobalSettings.url;
    return (

        <main role="main">

            <BabyStoreCarousel
                bannerOne={this.state.banner}
            />

            <div className="container marketing">

                <ThreeColumns />

                <Featurettes />

            </div>

            <Footer />

        </main>

    )
}
....
And final component that tries to display the image is-
<div className="carousel-item active">
                <img className="first-slide" src={this.props.bannerOne} alt="First slide" />
                    <div className="container">
                        <div className="carousel-caption text-left">
                            <h1>Example headline.</h1>
                            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            <p><a className="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
                        </div>
                    </div>
            </div>

Как указывалось ранее, я не уверен, правильно ли я отправляю изображение с контроллера с использованием библиотеки изображений Intervention или правильно ли оно отправляется с контроллера, как мне отобразить его на стороне клиента. Пожалуйста, помогите.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...