Ниже приведен мой код контроллера, который отправляет объект изображения:
публичная функция 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 или правильно ли оно отправляется с контроллера, как мне отобразить его на стороне клиента. Пожалуйста, помогите.