Nuxt•3mo ago

How to send back an image from nuxt3 api endpoint?

I want to secure my images that I send back, so I send it back through an endpoint, but when I do that, chrome can't read it. It sees like 2.4mb being transferred, but the resource size ends up being 0kb. I try this, and it works if I visit it directly in browser link, but not when I call it from JS. What am I doing wrong? I am calling it using $fetch, but I can still see it in network tab, the response is not showing correctly.

export default defineEventHandler(async (event) => {
  try {
    const user_id = event.context.session.id;
    const query = getQuery(event);
    const name = query.name as string|undefined;

    if (!name) throw new Error(`Invalid name`);
    
    const imageBuffer = await ProfileStore.ExtractImage(name);

    setHeader(event, 'Content-Type', 'image/jpeg');
    setHeader(event, 'Content-Length', imageBuffer.length);
    setHeader(event, 'Cache-Control', 'private, max-age=0');
    return sendStream(event, fs.createReadStream("../85046a2c-fa3f-4858-986a-1e56c9fe095q.jpg"));

  } catch (error: any) {
    setResponseStatus(event, 500, error.message);
    return {
      message: error.message,
    };
  }
});

export default defineEventHandler(async (event) => {
  try {
    const user_id = event.context.session.id;
    const query = getQuery(event);
    const name = query.name as string|undefined;

    if (!name) throw new Error(`Invalid name`);
    
    const imageBuffer = await ProfileStore.ExtractImage(name);

    setHeader(event, 'Content-Type', 'image/jpeg');
    setHeader(event, 'Content-Length', imageBuffer.length);
    setHeader(event, 'Cache-Control', 'private, max-age=0');
    return sendStream(event, fs.createReadStream("../85046a2c-fa3f-4858-986a-1e56c9fe095q.jpg"));

  } catch (error: any) {
    setResponseStatus(event, 500, error.message);
    return {
      message: error.message,
    };
  }
});

3 Replies

kapa.ai•3mo ago

Hi @sneaky. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To send back an image from a Nuxt 3 API endpoint, your approach of using sendStream and setting the appropriate headers is generally correct. However, there are a few important considerations and potential issues based on your description and the available knowledge sources: 1. Content-Type and Streaming:
You are correctly setting the Content-Type to image/jpeg and using sendStream to stream the image file. This is the right approach for serving images securely from an API endpoint. 2. Response Handling in JS ($fetch):
When you fetch an image using $fetch (which is based on ofetch), by default it expects JSON. If you want to handle binary data (like images), you need to specify the response type. However, the knowledge sources do not provide explicit details on handling binary responses with $fetch. If you use $fetch in the browser to get an image, you should set the responseType to 'blob' or 'arrayBuffer' (if supported), otherwise, the response may not be interpreted correctly by the browser or your JS code. The documentation does not cover this scenario directly, so you may need to consult the ofetch documentation for exact usage. 3. Network Tab Visibility:
Even when you fetch data server-side in Nuxt, if you use $fetch directly in a component (not wrapped in useAsyncData or useFetch), the request will be made both on the server and again on the client during hydration, causing it to appear in the browser's network tab. To avoid this, use useAsyncData or useFetch, which will transfer the data from server to client and prevent double-fetching. This is documented in the Nuxt docs:

Using $fetch in components without wrapping it with useAsyncData causes fetching the data twice: initially on the server, then again on the client-side during hydration, because $fetch does not transfer state from the server to the client.

Nuxt $fetch documentation 4. Image Not Displaying Correctly:
If Chrome shows 2.4MB transferred but 0KB resource size, it may indicate a problem with how the response is being handled or interpreted by the client. Make sure you are not trying to parse the image as JSON or text in your JS code. If you want to display the image in an <img> tag, you should set the src attribute to the API endpoint URL, not fetch it via JS and then try to display it. 5. Direct Browser Access vs. JS Fetch:
If the image works when accessed directly in the browser but not via JS, it's likely a client-side handling issue, not a server-side one. Summary of Recommendations: - For <img> tags, set src directly to your API endpoint. - If you must fetch the image via JS, ensure you handle the response as a blob or arrayBuffer. - Use useAsyncData or useFetch to avoid double-fetching and unnecessary network requests in the browser. - Double-check that your API endpoint sets the correct headers and streams the file properly. Example for <img> tag usage:

<img :src="`/api/your-endpoint?name=${imageName}`" alt="Profile Image" />

<img :src="`/api/your-endpoint?name=${imageName}`" alt="Profile Image" />

Example for JS fetch (not $fetch) with blob:

const response = await fetch('/api/your-endpoint?name=...');
const blob = await response.blob();
const url = URL.createObjectURL(blob);
// Use `url` as the src for your <img>

const response = await fetch('/api/your-endpoint?name=...');
const blob = await response.blob();
const url = URL.createObjectURL(blob);
// Use `url` as the src for your <img>

If you need to use $fetch for binary data, consult the ofetch documentation for the correct way to set the response type, as the Nuxt docs do not cover this detail. If you continue to see issues, double-check that the file path and permissions are correct, and that the file is being read and streamed without errors. --- If you need more specific guidance on handling binary responses with $fetch, the current knowledge sources do not provide enough detail. For general Nuxt API streaming and data fetching best practices, see the Nuxt $fetch documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@515344014027915267> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

sneakyOP•3mo ago

i switched to fetch, but it keeps rendering the same image on front end side figured it out, needed responseType: 'blob' in options in $fetch

Gaming

Programming

How to send back an image from nuxt3 api endpoint?

Did you find this page helpful?