N
Nuxt5mo ago
Eric

Proxying asset url from Directus

hello ! I watched this tutorial by Alexandre Lichter : https://www.youtube.com/watch?v=J4E5uYz5AY8 and it works great! But I'm now wandering how to proxy urls in image tags . I have a Directus backend that holds data and images. By setting up a proxy, my nuxt app can just get data from the /api/items endpoint and the request is automatically redirected to the Directus backend. Great !
const { data } = await useFetch('/api/items/Blogs', { server: false} )
const { data } = await useFetch('/api/items/Blogs', { server: false} )
This will return data from https://mydirectus.com/items/Blogs It also works for anchor tags:
<a href="/api/items/Blogs">
Blogs
</a>
<a href="/api/items/Blogs">
Blogs
</a>
This will show you the json from this endpoint. Perfect! But I tried this:
<img src="/api/assets/imageId ">
<img src="/api/assets/imageId ">
And it doesn't work. Shoot! "Does ths file really exists ?" it asks. What would be the right way to get the image without directly accessing https://mydirectus.com/assets/imageId ?
Alexander Lichter
YouTube
The BEST way to proxy your API in Nuxt
➡️ Proxying routes to your back-end or third party APIs is a common practice! Over the last two years, various strategies came up in Nuxt. But not all of them work equally will. To figure out which two strategies are the recommended ones, we have a look at the four most common strategies, their shortcomings and which ones I would recommend to us...
1 Reply
Eric
EricOP5mo ago
So I think I might have found a solution with the image module.
It provides a way to configure a provider url. When setting up the provider, you setup a baseUrl in the nuxt.config.ts file. My question is: will this url be exposed publicly ? or will it only be available server side ?
Want results from more Discord servers?
Add your server