Images are not caching

Hello everyone,

I am working on a page where I took the features.html.twig template of the antimatter theme and modified it so I can put my own pictures in the icon portion:

       {% if current.Photo %}
       <img src="/Lab Members/{{ current.Photo }}" alt="Current Lab Member"></img>
       <div class="member-content icon-offset">
       {% else %}
       <div class="member-content">
       {% endif %}
       {% if current.Name %}
       <h4>{{ current.Name }}</h4>
       {% endif %}
       {% if current.Position %}
       <p>{{ current.Position }}</p>
       {% endif %}
       </div>

In this case current.Photo has the name file for the picture I want it to load. The picture loads perfectly but it is not getting cached. This is not a issue when I am running my website locally but then I get errors 500 (only of a few of the pictures, and which pictures get the error varies whenever you reload) when I am running it off my hosting company. The error I was getting is that the page was using too much of the memory and couldn't display the website. I believe that if grav cached the images I would not have problems with the memory.

Also, I have tried using twig to call out the image:

       <img src="{{ page.media[current.Photo].url }}" alt="Current Lab Member"></img>

The image shows but when I check on chrome the link is not that of the cached image but of the actual picture.

Thank you for taking the time to read this, and thanks for the help.
-Juan Luis

@Juan Luis, try this:

{{ page.media['current.Photo.jpg?cache'].url }}

This solution is from Andy in this chat post

Correct, by default if you perform no media operations, the image is accessed directly as there's no point doing work on an image that is unchanged. However, using the ?cache option forces the image to be cached even though technically no operations have been performed.

How do I cache the pictures, when my code looks like this:

{{ page.media[row.image].html() }} ?

THX in advance!

Do you know why this isn't working:

<div style="background-image:url({{ page.media.images[item.background ~ '?cache'].url }});">

I only get

<div style="background-image:url();">

It works with this but image is not cached

<div style="background-image:url({{ page.media.images[item.background].url }});">

Thanks!