<p>It appears that the correct way to do it is using the url() method. I couldn't replicate the extra queries I mentioned in the question, and can confirm with some more testing that it doesn't cause any extra queries.</p>

<pre><code>{{ teaserImage.url("transform") }}
</code></pre>

<p>or</p>

<pre><code>{{ teaserImage.getUrl("transform") }}
</code></pre>

<p>Source: <a href="https://straightupcraft.com/articles/examples-of-eager-loading-elements-in-twig-and-php" rel="nofollow noreferrer">https://straightupcraft.com/articles/examples-of-eager-loading-elements-in-twig-and-php</a></p>

CC BY-SA 3.0
2017-04-08T23:42:07.787Z
2017-04-08T23:42:07.787Z
JamesNZ
<p>The craft docs on eager loading show you how to <a href="https://craftcms.com/docs/templating/eager-loading-elements#eager-loading-image-transform-indexes" rel="nofollow noreferrer">eager load image transforms</a> in twig. </p>

<pre><code>{% set entries = craft.entries({
    with: [
        ['coolImage', { withTransforms: ['transform'] }]
    ]
}) %}
</code></pre>

<p>However it doesn't show you how to actually USE them once they're eager loaded. <a href="https://craftcms.com/docs/templating/eager-loading-elements#accessing-eager-loaded-elements" rel="nofollow noreferrer">Accessing the eager loaded element</a> itself is easy:</p>

<pre><code>{% set teaserImage = entry.coolImage[0] ?? null %}
</code></pre>

<p>But I'm not sure how to access the transform from there. Using getUrl('transform') appears to still result in an extra query per element loaded (compared with .url() and no transform).</p>

<pre><code>{{ teaserImage.getUrl("transform") }} {# Boo - extra queries #}
</code></pre>

<p>What am I missing?</p>

<p>Thanks :)</p>

<assets><elementcriteriamodel><eager-loading>
Accessing Eager Loaded Transforms
# Accessing Eager Loaded Transforms

(Asked by: username_0 on 2017-04-05)

The craft docs on eager loading show you how to eager load image transforms in twig. 
{% set entries = craft.entries({
    with: [
        ['coolImage', { withTransforms: ['transform'] }]
    ]
}) %}

However it doesn't show you how to actually USE them once they're eager loaded. Accessing the eager loaded element itself is easy:
{% set teaserImage = entry.coolImage[0] ?? null %}

But I'm not sure how to access the transform from there. Using getUrl('transform') appears to still result in an extra query per element loaded (compared with .url() and no transform).
{{ teaserImage.getUrl("transform") }} {# Boo - extra queries #}

What am I missing?
Thanks :)

**Tags:** assets, elementcriteriamodel, eager-loading


---

## 1 answers

### Answer by username_0 on 2017-04-08. Score: 1 | Accepted answer

It appears that the correct way to do it is using the url() method. I couldn't replicate the extra queries I mentioned in the question, and can confirm with some more testing that it doesn't cause any extra queries.
{{ teaserImage.url("transform") }}

or
{{ teaserImage.getUrl("transform") }}

Source: https://straightupcraft.com/articles/examples-of-eager-loading-elements-in-twig-and-php


---

