如何确保图像已在 Laravel 5 中正确投放？

Question

（如果有编辑帮助我更好地命名这个问题，我将不胜感激）

我有一个控制器，它有一个在存储中提供 PNG 图像的方法，基本上它说：

public function background($id) {
    $campaign = Campaign::find($id);
    $file = Storage::get($campaign->background);
    return new Response($file, 200);
}

在我的路线中：

Route::get('/campaign/background/{id}', 
    'CampaignController@background')->name('campaign.background');

因此，如果我在 <img ...> HTML 标记内调用路由，它会完美运行：

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

它将给我 ID 为 1

的 class 活动的背景图片

现在，我的问题是当我尝试加载多个 img 时，比如在 Bootstrap 4 轮播中，我有：

<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>

只有第一张图片 (id 4) 显示正确，id 的 14 和 2 有时会正确加载，但大多数时候，它们不会，它们只显示 ALT。

我想肯定是缓存的问题，如果我重新加载页面几次，所有的imgs都会出现。

我正在使用 Laravel 5.7、PHP 7.2.10、Apache 2.4.35 而不是 Windows 10

Answer 1

可能某些 headers 丢失了，浏览器不知道您提供的是哪种文件？

你可以试试这个：

public function background($id) {
    $campaign = Campaign::find($id);
    return Storage::response($campaign->background);
}

Storage::response() 应该会自动设置 Content-Type、Content-Disposition、大小，也许还有一些我忘记了。这些 headers 将帮助浏览器确定响应中的内容类型。

如何确保图像已在 Laravel 5 中正确投放？

How to assure an image has been served right in Laravel 5?

php

laravel-5.7