Question

Laravel Statamic app not loading images on live, works fine on local host. Have tried storage:link and all other solutions!

Hello!

As mentioned, the src’s for my images in a Laravel Statamic app on the digital ocean app platform just aren’t coming through. The alt text is there. These images work absolutely fine on local which I see as a common issue posted, I’ve tried all the fixes but none have worked for me.

  • Have ensured that all my asset disks have urls and are public
  • Have done storage:link
  • Have increased the php memory limit with user ini
  • Set env variables for url, app key etc
  • Have NOT tried deleting the public storage folder as honestly, I don’t know how to do that on live through the console

I do think it’s an issue with the symlink in the file below, but I cannot figure out what is wrong with it. I’m sure it’s something simple but am banging my head against a wall figuring this out.

Any and all advice very welcome! Thanks

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_DISK', 'images'),

    '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 set up for each driver as an example of the required values.
    |
    | Supported Drivers: "local", "ftp", "sftp", "s3"
    |
    */

    'disks' => [

        'local' => [
            'driver' => 'local',
            'root' => storage_path('app'),
            'throw' => false,
            'url' => '/images',
            'visibility' => 'public',
        ],

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

        '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'),
            'endpoint' => env('AWS_ENDPOINT'),
            'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
            'throw' => false,
        ],

        'images' => [
            'driver' => 'local',
            'root' => public_path('images'),
            'url' => '/images',
            'visibility' => 'public',
        ],

        'favicons' => [
            'driver' => 'local',
            'root' => public_path('favicons'),
            'url' => '/favicons',
            'visibility' => 'public',
        ],

        'files' => [
            'driver' => 'local',
            'root' => public_path('files'),
            'url' => '/files',
            'visibility' => 'public',
        ],

        'social_images' => [
            'driver' => 'local',
            'root' => public_path('social_images'),
            'url' => '/social_images',
            'visibility' => 'public',
        ],

    ],

    /*
    |--------------------------------------------------------------------------
    | Symbolic Links
    |--------------------------------------------------------------------------
    |
    | Here you may configure the symbolic links that will be created when the
    | `storage:link` Artisan command is executed. The array keys should be
    | the locations of the links and the values should be their targets.
    |
    */

    'links' => [
        public_path('storage') => storage_path('app/public'),
    ],

];

Submit an answer


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Bobby Iliev
Site Moderator
Site Moderator badge
November 21, 2023

Hey @LukeGuy,

It seems like the core of the issue might be related to the APP_URL environment variable not matching your production domain. The APP_URL is crucial because it forms the base of all the absolute URLs that your application generates, including the paths to your images. Ensure that the APP_URL in your production environment is set to the correct domain or the DigitalOcean App Platform URL that your application is using.

Once you’ve verified that the APP_URL is set correctly, here’s what you can do next:

  • Open the Web Console: Use the browser’s developer tools (usually F12 or right-click and select “Inspect”) and go to the “Network” tab. Reload the page where your images should appear and look for the image requests.

  • Check the Image Paths: In the “Network” tab, you can see the exact URLs that the browser is trying to load for the images. If you see a 404 status or similar, the path is likely incorrect. The domain part of the URL should match your APP_URL.

  • Compare Paths: Compare the paths that are failing to load in the browser with what you expect them to be. Look for discrepancies in the base URL, directory structure, or file names.

  • Check for Typos or Case Sensitivity: URLs are case-sensitive on most servers, so ensure that the case of the path in your filesystems.php configuration matches the case of the actual directories and files on your server.

Also, keep in mind that the storage on the App Platform is ephemeral, meaning that if your app allows users to upload images, they will be stored on the local ephemeral storage and will lost on the next redeployment. Instead, it is better to use a persistent S3 storage like the DigitalOcean Spaces.

Let me know how it goes!

Best,

Bobby

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel