Element-API: Access the first url of an asset array

Question

I have an asset field in my current project with the handle postImage, containing multiple image files. In my element-api endpoint, I wish to access the url of the first file only.

I tried the following code:

$imgs = $entry->postImage;
$imgUrl = $imgs[0]->getUrl();

The resulting console error message says:

500 (Call to a member function getUrl() on string)

Looping through the array works fine, but I don't want all image urls, just the first one.

It's probably very easy, but that ties a knot my brain. I don't understand where the array is being converted to a string, can anyone hint me to the solution?

Thanks a lot!

Answer 1

you could use array_values() to fetch the first image:

...
      'transformer' => function (Entry $entry) {
        foreach ($entry->images as $image) {
          $images[] = $image->url;
        }
        return [
          'images' =>  array_values($images)[0],
        ];
      },
...

or use reset()

...
      'transformer' => function (Entry $entry) {
        foreach ($entry->images as $image) {
          $images[] = $image->url;
        }
        return [
          'images' =>  reset($images),
        ];
      },
...

Answer 2

You can do something like this:

'transformer' => function(craft\elements\Entry $entry) {
    $image = $entry->photos->one();

    return [
        'image' => $image ? $image->url : null,
    ];
},

More info here.