getThumbnail - TypeError: Failed to construct 'URL': Invalid URL

[LeanderD]

Version

nuxt-directus: 5.2.1 nuxt: 3.4.3

Reproduction Link

getThumbnail

Steps to reproduce

Set directus.url in nuxt.config.ts without a trailing slash (eg: http://localhost:8055)

What is Expected?

Get a valid image URL.

What is actually happening?

Get error: TypeError: Failed to construct 'URL': Invalid URL

Why is it happening?

Because getThumbnail in useDirectusFiles sets the URL like: const url = new URL(${directusUrl}assets/${fileId});' (useDirectusFiles:24`)

So if directusUrl doesn't have a trailing slash, the URL will be invalid. The docs don't mention it needs to end with a trailing slash and useDirectusItems, getFiles in useDirectusFiles add the slash. (eg: directus("/files"))

Maybe this should be mentioned or directusUrl should check if there's a trailing slash.

[Intevel]

@LeanderD Does this work with a trailing slash?

[LeanderD]

After adding the trailing slash it does work. But it's not mentioned in the docs and the other composables do work without a trailing slash.

So it took a bit of debugging to find the issue.