Question

我在布局中使用了预加载器gif，它位于public / img中，并通过以下代码行使用： <img src="img/preloader.gif" alt="Preloader">

这对于除一条路径之外的所有路径都非常适用，该路径定义如下：

Route::get('/test/{name}', function ($name) {
return view('test')->with('name',$name); });

这是“测试”视图：

@extends('layouts.app')

@section('content')

<section>
    <div>
        <h1>{{$name}}</h1>  
    </div>
</section>

@endsection

最后，这是我稍作修改的filesystems.php，其中的“本地”已更改：

<?php

return [

/*
|--------------------------------------------------------------------------
| Default Filesystem Disk
|--------------------------------------------------------------------------
|
| Here you may specify the default filesystem disk that should be used
| by the framework. The "local" disk, as well as a variety of cloud
| based disks are available to your application. Just store away!
|
*/

'default' => env('FILESYSTEM_DRIVER', 'local'),

/*
|--------------------------------------------------------------------------
| Default Cloud Filesystem Disk
|--------------------------------------------------------------------------
|
| Many applications store files both locally and in the cloud. For this
| reason, you may specify a default "cloud" driver here. This driver
| will be bound as the Cloud disk implementation in the container.
|
*/

'cloud' => env('FILESYSTEM_CLOUD', 's3'),

/*
|--------------------------------------------------------------------------
| Filesystem Disks
|--------------------------------------------------------------------------
|
| Here you may configure as many filesystem "disks" as you wish, and you
| may even configure multiple disks of the same driver. Defaults have
| been setup for each driver as an example of the required options.
|
| Supported Drivers: "local", "ftp", "sftp", "s3", "rackspace"
|
*/

'disks' => [

    'local' => [
        'driver' => 'local',
        'root' => storage_path('../public/img/uploads/'),
    ],

    'public' => [
        'driver' => 'local',
        'root' => storage_path('app/public'),
        'url' => env('APP_URL').'/storage',
        'visibility' => 'public',
    ],

    's3' => [
        'driver' => 's3',
        'key' => env('AWS_ACCESS_KEY_ID'),
        'secret' => env('AWS_SECRET_ACCESS_KEY'),
        'region' => env('AWS_DEFAULT_REGION'),
        'bucket' => env('AWS_BUCKET'),
        'url' => env('AWS_URL'),
    ],

],

];

为什么我要面对这个问题？解决该问题的最佳方法是什么？

Answer 1

您的图片src使用的是相对URI ，它的意思是“获取当前URI，并将其添加到末尾”。

当您进入首页example.com时，图像路径为example.com/img/preloader.gif，这是正确的。

一旦您使用的是更深层的URI，且包含多个细分，例如example.com/test/foobar，图片URI变成example.com/test/img/preloader.gif，这显然是错误的。

在Laravel中解决此问题的最简单，最推荐的方法是使用asset() or secure_asset() helpers。这将有助于生成图像/资产的绝对URI，并且无论用户位于应用程序的哪个页面上都是正确的。

<img src="{!! asset('img/preloader.gif') !!}" alt="Preloader">

Laravel 5.6：资源不在一条路线上加载

1 个答案: