Glide Images not displaying on the front end

[YoBigRube]

I'm not able to get glide tags loading or modifying images.

Environment info

This project is migrating a v2 project to v3. I'm still getting acclimated to how things work in v3.

DDEV_WEBSERVER_TYPE | apache-fpm
PHP Version | 8.0.26
GD Support | enabled (2.3.3)
imagick => imagick module version | 3.7.0

I can successfully load the image using the variable name with no issues.

I'm not sure it matters, but these particular images are contained within a grid within a global.

{{ globals__lets_work_book_me_ctas }}
    {{ globals__how_can_i_help_cta_items_grid }}
         {{ cta_item_banner }}
              <img src="{{ url }}">
          {{ /cta_item_banner }}
{{ /closing tags here...}}

The block above works as expected and renders out to:

<img src="/assets/main/footer/lets-work-book-me/coaching-thumb--cindy-gallop--708x708--photograhed-by-zack-roif.jpg">

My glide tags create the dynamic path to an image, but do not render any image.

Also, it does no add the file type extension (eg. .jpg).

Does not show an image:

<img src="{{ glide :src='cta_item_banner' preset="footer_lets_work_book_me_cta__base" }}">

the above code renders this HTML:

<img src="/auto-generated-assets/img/asset/bWFpbi9mb290ZXIvbGV0cy13b3JrLWJvb2stbWUvcGFydG5lcnNoaXBzLXRodW1iLS1jaW5keS1nYWxsb3AtLTcwOHg3MDguanBn?p=footer_lets_work_book_me_cta__base&amp;s=ce593ace6121edd11fcdb7f3bf20ac19">

filesystem.php

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

 'disks' => [

        'local' => [
            'driver' => 'local',
            'root' => storage_path('app'),
        ],

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

        'assets_main' => [
            'driver' => 'local',
            'root' => public_path('assets/main'),
            'url' => '/assets/main',
            'visibility' => 'public',
            'throw' => false,
        ],

        'assets_videos' => [
            'driver' => 'local',
            'root' => public_path('assets/videos'),
            'url' => '/assets/videos',
            'visibility' => 'public',
            'throw' => false,
        ],

    ],

assets.php

I tried switching from gd to imagick but it didn't change anything.

  'image_manipulation' => [
        'route' => 'auto-generated-assets/img',

        'secure' => true,

        'driver' => 'gd',

        'cache' => false,
        'cache_path' => public_path('auto-generated-assets/img'),

        'presets' => [
            // 'small' => ['w' => 200, 'h' => 200, 'q' => 75, 'fit' => 'crop'],
            // Foot Lets Work Book Me CTA - (responsive images)
            'footer_lets_work_book_me_cta__1278px' => ['w' => 500, 'h' => 500, 'q' => 22, 'fit' => 'crop_focal'],
            'footer_lets_work_book_me_cta__768px' => ['w' => 584, 'h' => 584, 'q' => 35, 'fit' => 'crop_focal'],
            'footer_lets_work_book_me_cta__640px' => ['w' => 584, 'h' => 584, 'q' => 30, 'fit' => 'crop_focal'],
            'footer_lets_work_book_me_cta__275px' => ['w' => 708, 'h' => 708, 'q' => 35, 'fit' => 'crop_focal'],
            'footer_lets_work_book_me_cta__base' => ['w' => 708, 'h' => 708, 'q' => 40, 'fit' => 'crop_focal'],
        ],

    ],

[jasonvarga]

If you view that image in its own browser tab, what do you see?

[YoBigRube]

Hey @jasonvarga (thnx for your help!),

I get a "Signature is Missing" error:

Symfony\Component\HttpKernel\Exception\HttpException
Signature is missing.
https://v3-starterkit.test/auto-generated-assets/img/asset/bWFpbi9mb290ZXIvbGV0cy13b3JrLWJvb2stbWUvY29hY2hpbmctdGh1bWItLWNpbmR5LWdhbGxvcC0tNzA4eDcwOC0tcGhvdG9ncmFoZWQtYnktemFjay1yb2lmLmpwZw==%3Fp=footer_lets_work_book_me_cta__base&s=2a73e0cc7c86894855ef5d7a5bfa2a93 

[marvinhuebner]

I have the same problem. We use Statamic as a headless CMS via the GraphQL API and want to display responsive images and only get a 404 error when calling the manipulated image url.

✅ Default img get's displayed: 
http://127.0.0.1:8000/assets/placeholder.jpg

❌ This does not work:
http://127.0.0.1:8000/img/assets/placeholder.jpg?w=200
http://127.0.0.1:8000/img/assets/placeholder.jpg?p=test

When I run php please assets:generate-presets I see that in storage/statamic/glide/containers/assets the images are generated and stored under a cryptic name.

I've also tried to render the image with a glide tag in an Antlers template, but does also not work.
But interesting, it removes the /assets/ part, but still no image is displayed. Again a 404 error when I call the image directly.

<img src="{{ glide src='placeholder.jpg' preset='test' }}">  // <img src="/img/placeholder.jpg?p=test">

[jasonvarga]

You showed this:

<img src="{{ glide src='placeholder.jpg' preset='test' }}">  // <img src="/img/600x400.jpg?p=test">

That doesn't make sense. You asked for placeholder.jpg and it gives you 600x400.jpg. Is that accurate? Or a copy paste error?

[marvinhuebner]

Hey @jasonvarga, just a copy and paste error, 600x400.jpg was my other test picture.