Wsrtjtyk

(If some editor helps me to title this question better, I'll be more than thankful)

I have a controller which has a method that serves a PNG image in a Storage, basically it says:

public function background($id) {

    $campaign = Campaign::find($id);

    $file = Storage::get($campaign->background);

    return new Response($file, 200);

}

In the routes I have:

Route::get('/campaign/background/{id}', 

    'CampaignController@background')->name('campaign.background');

So, if I call the route inside an <img ...> HTML tag, it works perfectly:

<img src="{{ route('campaign.background', [id => 1]) }}" class="...">

It will give me the background image for the class Campaign with the id 1

Now, my problem is when I try to load several imgs, like in a Bootstrap 4 carousel, I have:

<div id="caro" class="carousel slide" data-ride="carousel">

    <div class="carousel-inner">

        <div class="carousel-item active">

            <img class="d-block w-100" src="{{ route('campaign.background', ['id' => '4']) }}?auto=yes" alt="First slide">

        </div>

        <div class="carousel-item">

            <img class="d-block w-100" src="{{ route('campaign.background', ['id' => '14']) }}?auto=yes" alt="Second slide">

        </div>

        <div class="carousel-item">

            <img class="d-block w-100" src="{{ route('campaign.background', ['id' => '2']) }}?auto=yes" alt="Third slide">

        </div>

    </div>

</div>

Only the first image (id 4) is shown correctly, id's 14 and 2 sometimes loads correctly, but most times, they don't, they only show the ALT.

I think it must be something related to the cache, if I reload the page several times, all the imgs appear.

I'm using Laravel 5.7, PHP 7.2.10, Apache 2.4.35 over Windows 10

Maybe some headers are missing and the browser doesn't know what kind of file you're serving?

You could try this:

public function background($id) {

    $campaign = Campaign::find($id);

    return Storage::response($campaign->background);

}

Storage::response() should automatically set Content-Type, Content-Disposition, size, and maybe a few others I'm forgetting about. These headers will help browsers determine what kind of content was in the response.